mirror of https://github.com/ElemeFE/element
misc doc updates
Leopoldthecoder
parent
001584e4ab
commit
0dba1da935
|
|
@ -1,5 +1,11 @@
|
|||
## 更新日志
|
||||
|
||||
### 1.0.0-rc.4（待发布）
|
||||
|
||||
*2016-XX-XX*
|
||||
|
||||
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
||||
|
||||
### 1.0.0-rc.3
|
||||
|
||||
*2016-09-09*
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@ Vue.use(Element)
|
|||
|
||||
// or
|
||||
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, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
<div>
|
||||
<h2>导航</h2>
|
||||
<div class="block">
|
||||
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎p去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。</p>
|
||||
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>选择合适的导航</h3>
|
||||
|
|
|
|||
|
|
@ -190,6 +190,7 @@
|
|||
});
|
||||
this.selectedInit = true;
|
||||
this.selected = [];
|
||||
this.currentPlaceholder = this.cachedPlaceHolder;
|
||||
val.forEach(item => {
|
||||
let option = this.options.filter(option => option.value === item)[0];
|
||||
if (option) {
|
||||
|
|
|
|||
|
|
@ -84,12 +84,12 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
value(val) {
|
||||
if (this.onColor || this.offColor) {
|
||||
this.handleCoreColor();
|
||||
}
|
||||
this.handleButtonTransform();
|
||||
this.$emit('change');
|
||||
this.$emit('change', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue