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