Merge pull request #99 from csvwolf/next

fix radio logic & radio document

examples/docs/radio.md

@@ -15,12 +15,16 @@
 
 ## 基本用法
 
+要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
+
 <div class="demo-box demo-radio">
   <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>
 </div>
 
+{{radio}}
+
 ```html
 <template>
   <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
@@ -32,8 +36,8 @@
   export default {
     data () {
       return {
-        radio: '选中且禁用'
-      }
+        radio: ''
+      };
     }
   }
 </script>
@@ -41,6 +45,8 @@
 
 ## Radio Group
 
+结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
+
 <div class="demo-box demo-radio">
   <el-radio-group v-model="radio2">
     <el-radio :label="9"></el-radio>
@@ -59,6 +65,8 @@
 
 ## Radio Group Button
 
+还有一种特殊的单选按钮组，只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
+
 <div class="demo">
   <el-radio-group v-model="radio31" size="large">
     <el-radio-button label="上海"></el-radio-button>
@@ -107,33 +115,52 @@
 
 ## 禁用
 
+只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+
+注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
+
 <div class="demo-box demo-radio">
   <el-radio disabled v-model="radio" label="禁用"></el-radio>
   <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
 </div>
 
 ```html
-<el-radio disabled v-model="radio" label="禁用"></el-radio>
-<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
+<template>
+  <el-radio disabled v-model="radio" label="禁用"></el-radio>
+  <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '',
+        radio1: '选中且禁用'
+      };
+    }
+  }
+</script>
 ```
 
 
-## Radio API
+## Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value     | 绑定值   | string,number  |               |         |
-| label     | 真实值   | string,number    |               |         |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| label     | Radio 的 value   | string,number    |               |         |
+| disabled  | 是否禁用    | boolean   |   | false   |
 
-## Radio Group API
+## Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value     | 绑定值   | string,number  |               |         |
-| size     | 尺寸   | string  | large, small  |         |
-| change  | 绑定值变化时触发的事件 | Function(value) |    |    |
+| size     | Radio 按钮组尺寸   | string  | large, small  |         |
+
+## Radio-group Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
 
-## Radio Button API
+## Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 真实值   | string,number  |               |         |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| label     | Radio 的 value  | string,number  |               |         |
+| disabled  | 是否禁用    | boolean   |   | false   |

packages/radio/src/radio-button.vue

@@ -8,8 +8,12 @@
         required: true
       },
       disabled: Boolean,
-      name: String,
-      size: String
+      name: String
+    },
+    data() {
+      return {
+        size: this.$parent.size
+      };
     },
     computed: {
       value: {
@@ -20,9 +24,6 @@
           this.$parent.$emit('input', newValue);
         }
       }
-    },
-    ready() {
-      this.size = this.$parent.size;
     }
   };
 </script>