Skip to content

E
Element
Commit 0edd7b42 authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

Merge pull request #63 from eleme/feat/radio 

update radio
parents 0de1650c 4c37face
Hide whitespace changes
Inline Side-by-side
Showing with 33 additions and 40 deletions
examples/docs/radio.md
View file @ 0edd7b42
......@@ -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 |
packages/radio/src/radio-button.vue
View file @ 0edd7b42
......@@ -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>
packages/radio/src/radio-group.vue
View file @ 0edd7b42
......@@ -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]);
}
}
......
packages/radio/src/radio.vue
View file @ 0edd7b42
......@@ -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);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment