github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update radio

pull/2/head
baiyaaaaa 2016-08-15 10:36:21 +08:00
parent 05081a7424
commit 4c37face35
4 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
examples/docs/radio.md
View File

@ -16,16 +16,16 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
</div> </div>
```html ```html
<template> <template>
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
</template> </template>
<script> <script>
@ -42,7 +42,7 @@
## Radio Group ## Radio Group
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio-group :value.sync="radio2"> <el-radio-group v-model="radio2">
<el-radio :label="9"></el-radio> <el-radio :label="9"></el-radio>
<el-radio :label="6"></el-radio> <el-radio :label="6"></el-radio>
<el-radio :label="3"></el-radio> <el-radio :label="3"></el-radio>
@ -50,7 +50,7 @@
</div> </div>
```html ```html
<el-radio-group :value.sync="radio2"> <el-radio-group v-model="radio2">
<el-radio :label="9"></el-radio> <el-radio :label="9"></el-radio>
<el-radio :label="6"></el-radio> <el-radio :label="6"></el-radio>
<el-radio :label="3"></el-radio> <el-radio :label="3"></el-radio>
@ -60,7 +60,7 @@
## Radio Group Button ## Radio Group Button
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio31" size="large"> <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="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
@ -68,7 +68,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio32"> <el-radio-group v-model="radio32">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<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="广州" :disabled="true"></el-radio-button>
@ -76,7 +76,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio33" size="small"> <el-radio-group v-model="radio33" size="small">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<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="广州" :disabled="true"></el-radio-button>
@ -85,19 +85,19 @@
</div> </div>
```html ```html
<el-radio-group :value.sync="radio31" size="large"> <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="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button> <el-radio-button label="深圳"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-radio-group :value.sync="radio32"> <el-radio-group v-model="radio32">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<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="广州" :disabled="true"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button> <el-radio-button label="深圳"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-radio-group :value.sync="radio33" size="small"> <el-radio-group v-model="radio33" size="small">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<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="广州" :disabled="true"></el-radio-button>
@ -108,31 +108,32 @@
## 禁用 ## 禁用
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio disabled :value.sync="radio" label="禁用"></el-radio> <el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio> <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
</div> </div>
```html ```html
<el-radio disabled :value.sync="radio" label="禁用"></el-radio> <el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio> <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
``` ```
## Radio API ## Radio API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string | | | | value | 绑定值 | string,number | | |
| label | 真实值 | string | | | | label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
## Radio Group API ## Radio Group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string | | | | value | 绑定值 | string,number | | |
| size | 尺寸 | string | large, small | | | size | 尺寸 | string | large, small | |
| change | 绑定值变化时触发的事件 | Function(value) | | |
## Radio Button API ## Radio Button API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 真实值 | string | | | | label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |

4
packages/radio/src/radio-button.vue
View File

@ -17,7 +17,7 @@
return this.$parent.value; return this.$parent.value;
}, },
set(newValue) { set(newValue) {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
}, },
@ -44,7 +44,7 @@
:disabled="disabled"> :disabled="disabled">
<span class="el-radio-button__inner"> <span class="el-radio-button__inner">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>

9
packages/radio/src/radio-group.vue
View File

@ -4,18 +4,17 @@
export default { export default {
name: 'ElRadioGroup', name: 'ElRadioGroup',
componentName: 'radio-group',
mixins: [emitter], mixins: [emitter],
props: { props: {
value: { value: [String, Number],
default: '',
twoWay: true,
required: true
},
size: String size: String
}, },
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value);
this.dispatch('form-item', 'el.form.change', [this.value]); this.dispatch('form-item', 'el.form.change', [this.value]);
} }
} }

15
packages/radio/src/radio.vue
View File

@ -19,7 +19,7 @@
</span> </span>
<span class="el-radio__label"> <span class="el-radio__label">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>
@ -28,9 +28,7 @@
name: 'ElRadio', name: 'ElRadio',
props: { props: {
value: { value: [String, Number],
twoWay: true
},
label: { label: {
type: [String, Number], type: [String, Number],
required: true required: true
@ -43,11 +41,6 @@
focus: false focus: false
}; };
}, },
watch: {
value(value) {
this.$emit('onchange', value);
}
},
computed: { computed: {
_value: { _value: {
get() { get() {
@ -55,9 +48,9 @@
}, },
set(newValue) { set(newValue) {
if (this.value !== undefined) { if (this.value !== undefined) {
this.value = newValue; this.$emit('input', newValue);
} else { } else {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
} }