misc doc updates

This commit is contained in:
Leopoldthecoder
2016-09-12 13:53:45 +08:00
parent 001584e4ab
commit 0dba1da935
8 changed files with 30 additions and 52 deletions

View File

@@ -130,8 +130,8 @@
<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
<el-button type="primary" icon="search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
@@ -161,7 +161,7 @@
:::demo 要设置为 loading 状态,只要设置`loading`属性为`true`即可。
```html
<el-button type="primary" :loading="true">Button</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
```
:::
@@ -172,10 +172,10 @@ Button 组件提供除了默认值以外的三种尺寸,可以在不同场景
:::demo 额外的尺寸:`large``small``mini`,通过设置`size`属性来配置它们。
```html
<el-button type="primary" size="large">large</el-button>
<el-button type="primary">default</el-button>
<el-button type="primary" size="small">small</el-button>
<el-button type="primary" size="mini">mini</el-button>
<el-button type="primary" size="large">大型按钮</el-button>
<el-button type="primary">正常按钮</el-button>
<el-button type="primary" size="small">小型按钮</el-button>
<el-button type="primary" size="mini">超小按钮</el-button>
```
:::

View File

@@ -68,9 +68,9 @@
### 基本用法
Dialog 弹出一个对话框,适合需要定制性更大的场景,如果只是弹出框,可以尝试 MessageBox 组件
Dialog 弹出一个对话框,适合需要定制性更大的场景。
:::demo 需要设置`v-model`属性,它接收`Boolean`,当为`true`时显示 Dialog。Dialog 分为两个部分:`body``footer``footer`需要具名为`footer``slot``title`属性用于定义标题,它是可选的,默认值为空。
:::demo 需要设置`v-model`属性,它接收`Boolean`,当为`true`时显示 Dialog。Dialog 分为两个部分:`body``footer``footer`需要具名为`footer``slot``title`属性用于定义标题,它是可选的,默认值为空。本例通过显式改变`v-model`的值来打开 Dialog此外我们还为 Dialog 实例提供了`open``close`方法,可以通过调用它们来打开/关闭 Dialog。
```html
<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
@@ -85,38 +85,9 @@ Dialog 弹出一个对话框,适合需要定制性更大的场景,如果只
```
:::
### 使用 Dialog 方法打开
:::demo 使用实例`open``close`方法,不用显式改变`v-modal`的值。
```html
<template>
<el-button type="text" @click.native="openDialog()">使用Dialog方法</el-button>
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogBindVisible: false
}
},
methods: {
openDialog() {
this.$refs.dialogBind.open();
}
}
};
</script>
```
:::
### 自定义内容
Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。
Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。
:::demo
```html

View File

@@ -1,6 +1,6 @@
## 快速上手
element 是为饿了么定制的一套 Vue.js 后台组件库帮助你更轻松更快速开发后台项目。
element 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速开发后台项目。
### 安装
@@ -21,7 +21,7 @@ Vue.use(Element)
或者只引入你需要的组件
**use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
```javascript
import {
@@ -30,25 +30,25 @@ import {
// ...
} from 'element-ui'
Vue.component(Select.name, ElSelect)
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
(roughly) to
将会被翻译成
```javascript
import Select from 'element-ui/lib/select';
import Select from 'element-ui/lib/theme-default/select.css';
import 'element-ui/lib/theme-default/select.css';
import Button from 'element-ui/lib/button';
import Button from 'element-ui/lib/theme-default/button.css';
import 'element-ui/lib/theme-default/button.css';
Vue.component(Select.name, ElSelect)
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
### babel-plugin-component
.babelrc
配置 .babelrc
```json
{