mirror of https://github.com/ElemeFE/element
134 lines
4.0 KiB
Markdown
134 lines
4.0 KiB
Markdown
<script>
|
||
module.exports = {
|
||
data() {
|
||
return {
|
||
radio: '',
|
||
radio1: '选中且禁用',
|
||
radio2: 3,
|
||
radio31: '',
|
||
radio32: '',
|
||
radio33: ''
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
## Radio 单选框
|
||
|
||
在一组备选项中进行单选
|
||
|
||
### 基本用法
|
||
|
||
选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||
|
||
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
|
||
|
||
```html
|
||
<template>
|
||
<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>
|
||
|
||
{{radio}}
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
radio: ''
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
:::
|
||
|
||
### Radio Group
|
||
|
||
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
|
||
|
||
```html
|
||
<el-radio-group v-model="radio2">
|
||
<el-radio :label="9"></el-radio>
|
||
<el-radio :label="6"></el-radio>
|
||
<el-radio :label="3"></el-radio>
|
||
</el-radio-group>
|
||
```
|
||
:::
|
||
|
||
### Radio Group Button
|
||
|
||
一种特殊的单选按钮组。
|
||
|
||
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
|
||
```html
|
||
<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 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 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>
|
||
<el-radio-button label="深圳"></el-radio-button>
|
||
</el-radio-group>
|
||
```
|
||
:::
|
||
|
||
### 禁用
|
||
|
||
单选框不可用的状态。
|
||
|
||
注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
|
||
|
||
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||
```html
|
||
<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 Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| label | Radio 的 value | string,number | | |
|
||
| disabled | 是否禁用 | boolean | | false |
|
||
|
||
### Radio-group Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| size | Radio 按钮组尺寸 | string | large, small | |
|
||
|
||
### Radio-group Events
|
||
| 事件名称 | 说明 | 回调参数 |
|
||
|---------- |-------- |---------- |
|
||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||
|
||
### Radio-button Attributes
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|---------- |-------- |---------- |------------- |-------- |
|
||
| label | Radio 的 value | string,number | | |
|
||
| disabled | 是否禁用 | boolean | | false |
|