From 81a6add907cc2b258dd859579abe4fb97baced7e Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Fri, 9 Sep 2016 12:28:56 +0800
Subject: [PATCH] update docs
---
examples/docs/checkbox.md | 30 +++++++++++-------------
examples/docs/input-number.md | 1 -
examples/docs/input.md | 4 ++++
examples/docs/radio.md | 44 +++++++++++------------------------
examples/docs/rate.md | 2 --
examples/docs/switch.md | 2 --
packages/steps/src/steps.vue | 6 +++++
7 files changed, 38 insertions(+), 51 deletions(-)
diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md
index 8b4c40a86..8f1924bf1 100644
--- a/examples/docs/checkbox.md
+++ b/examples/docs/checkbox.md
@@ -7,9 +7,7 @@
checked: true,
checked1: false,
checked2: true,
- name: 'Jonny',
- a: 'Jonny',
- b: 'Lara'
+ isValid: '可用'
};
}
};
@@ -32,13 +30,14 @@
### 基础用法
-适用广泛的基础用法。
+单独使用可以表示两种状态之间的切换
:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
```html
<template>
- <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
+ <!-- `checked` 为 true 或 false -->
+ <el-checkbox class="checkbox" v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
@@ -78,6 +77,8 @@
### 多选框组
+适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
+
:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
```html
@@ -89,9 +90,6 @@
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
-
- <p>{{ checkList }}</p>
-
</template>
<script>
@@ -106,7 +104,9 @@
```
:::
-### 绑定 value 的多选框
+### 可切换值的多选框
+
+多选框单独时，除了可以表示为是否选中的逻辑值以外，你还可以设定其选中和未选中所表示的值。
:::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值，可以为`String`或`Number`类型。
@@ -114,19 +114,17 @@
<template>
<el-checkbox
class="checkbox"
- v-model="name"
- :true-label="a"
- :false-label="b">
- {{name}}
+ v-model="isValid"
+ true-label="可用"
+ false-label="不可用">
+ {{isValid}}
</el-checkbox>
</template>
<script>
export default {
data() {
return {
- name: 'Jonny',
- a: 'Jonny',
- b: 'Lara'
+ isValid: '可用'
};
}
};
diff --git a/examples/docs/input-number.md b/examples/docs/input-number.md
index 2d9ce922b..d0a75981d 100644
--- a/examples/docs/input-number.md
+++ b/examples/docs/input-number.md
@@ -51,7 +51,6 @@
```html
<el-input-number v-model="num1" :disabled="true"></el-input-number>
-<el-input-number v-model="num3" :min="5" :max="10"></el-input-number>
```
:::
diff --git a/examples/docs/input.md b/examples/docs/input.md
index c973edf2f..15d0a603e 100644
--- a/examples/docs/input.md
+++ b/examples/docs/input.md
@@ -159,6 +159,10 @@
}
.tac {
text-align: center;
+
+ .el-autocomplete {
+ text-align: left;
+ }
}
.el-row.border-grid {
.el-col:not(:last-child) {
diff --git a/examples/docs/radio.md b/examples/docs/radio.md
index 00e123279..476e88adf 100644
--- a/examples/docs/radio.md
+++ b/examples/docs/radio.md
@@ -2,12 +2,10 @@
module.exports = {
data() {
return {
- radio: '',
+ radio: '1',
radio1: '选中且禁用',
radio2: 3,
- radio31: '',
- radio32: '',
- radio33: ''
+ radio3: ''
};
}
};
@@ -17,19 +15,16 @@
在一组备选项中进行单选
-### 基本用法
+### 基础用法
-选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
+由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
```html
<template>
- <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
- <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
- <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
-
- {{radio}}
+ <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
+ <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
</template>
<script>
@@ -51,15 +46,14 @@
:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
```html
<template>
- <el-radio disabled v-model="radio" label="禁用"></el-radio>
- <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
+ <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
+ <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
- radio: '',
radio1: '选中且禁用'
};
}
@@ -70,13 +64,15 @@
### 单选框组
+适用于在多个互斥的选项中选择的场景
+
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
```html
<el-radio-group v-model="radio2">
- <el-radio :label="9"></el-radio>
- <el-radio :label="6"></el-radio>
- <el-radio :label="3"></el-radio>
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
</el-radio-group>
```
:::
@@ -87,19 +83,7 @@
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
```html
-<el-radio-group v-model="radio31" size="large">
- <el-radio-button label="上海"></el-radio-button>
- <el-radio-button label="北京"></el-radio-button>
- <el-radio-button label="广州" :disabled="true"></el-radio-button>
- <el-radio-button label="深圳"></el-radio-button>
-</el-radio-group>
-<el-radio-group v-model="radio32">
- <el-radio-button label="上海"></el-radio-button>
- <el-radio-button label="北京"></el-radio-button>
- <el-radio-button label="广州" :disabled="true"></el-radio-button>
- <el-radio-button label="深圳"></el-radio-button>
-</el-radio-group>
-<el-radio-group v-model="radio33" size="small">
+<el-radio-group v-model="radio3">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button>
diff --git a/examples/docs/rate.md b/examples/docs/rate.md
index 042580e84..e295f719e 100644
--- a/examples/docs/rate.md
+++ b/examples/docs/rate.md
@@ -44,8 +44,6 @@
### 基础用法
-适用广泛的基础用法
-
:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
``` html
<div class="block">
diff --git a/examples/docs/switch.md b/examples/docs/switch.md
index cc8c9befb..b72f8d8f7 100644
--- a/examples/docs/switch.md
+++ b/examples/docs/switch.md
@@ -24,8 +24,6 @@
### 基本用法
-适用广泛的基础用法
-
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
```html
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 773a0d882..3f569378a 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -29,6 +29,12 @@ export default {
};
},
+ watch: {
+ active(newVal, oldVal) {
+ this.$emit('change', newVal, oldVal);
+ }
+ },
+
mounted() {
this.steps.forEach((child, index) => {
child.index = index;