mirror of https://github.com/ElemeFE/element
update radio
baiyaaaaa
parent
05081a7424
commit
4c37face35
|
|
@ -16,16 +16,16 @@
|
|||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-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>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
## Radio Group
|
||||
|
||||
<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="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
|
||||
```html
|
||||
<el-radio-group :value.sync="radio2">
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="9"></el-radio>
|
||||
<el-radio :label="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
## Radio Group Button
|
||||
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -85,19 +85,19 @@
|
|||
</div>
|
||||
|
||||
```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="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</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="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -108,31 +108,32 @@
|
|||
## 禁用
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
|
||||
```
|
||||
|
||||
|
||||
## Radio API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| label | 真实值 | string | | |
|
||||
| value | 绑定值 | string,number | | |
|
||||
| label | 真实值 | string,number | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
||||
## Radio Group API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| value | 绑定值 | string,number | | |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
| change | 绑定值变化时触发的事件 | Function(value) | | |
|
||||
|
||||
## Radio Button API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 真实值 | string | | |
|
||||
| label | 真实值 | string,number | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
return this.$parent.value;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$parent.value = newValue;
|
||||
this.$parent.$emit('input', newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
:disabled="disabled">
|
||||
<span class="el-radio-button__inner">
|
||||
<slot></slot>
|
||||
<template v-if="!_slotContents">{{label}}</template>
|
||||
<template v-if="!$slots.default">{{label}}</template>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,17 @@
|
|||
export default {
|
||||
name: 'ElRadioGroup',
|
||||
|
||||
componentName: 'radio-group',
|
||||
|
||||
mixins: [emitter],
|
||||
|
||||
props: {
|
||||
value: {
|
||||
default: '',
|
||||
twoWay: true,
|
||||
required: true
|
||||
},
|
||||
value: [String, Number],
|
||||
size: String
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('change', value);
|
||||
this.dispatch('form-item', 'el.form.change', [this.value]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</span>
|
||||
<span class="el-radio__label">
|
||||
<slot></slot>
|
||||
<template v-if="!_slotContents">{{label}}</template>
|
||||
<template v-if="!$slots.default">{{label}}</template>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
|
@ -28,9 +28,7 @@
|
|||
name: 'ElRadio',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
twoWay: true
|
||||
},
|
||||
value: [String, Number],
|
||||
label: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
|
|
@ -43,11 +41,6 @@
|
|||
focus: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('onchange', value);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
|
|
@ -55,9 +48,9 @@
|
|||
},
|
||||
set(newValue) {
|
||||
if (this.value !== undefined) {
|
||||
this.value = newValue;
|
||||
this.$emit('input', newValue);
|
||||
} else {
|
||||
this.$parent.value = newValue;
|
||||
this.$parent.$emit('input', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue