Merge pull request #70 from baiyaaaaa/update-docs

update docs

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: '可用'
       };
     }
   };

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>
 ```
 :::
 

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) {

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>

examples/docs/rate.md

@@ -44,8 +44,6 @@
  
 ### 基础用法
 
-适用广泛的基础用法
-
 :::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
 ``` html
 <div class="block">

examples/docs/switch.md

@@ -24,8 +24,6 @@
 
 ### 基本用法
 
-适用广泛的基础用法
-
 :::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
 
 ```html

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;