mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-06 06:08:28 +08:00
4.7 KiB
4.7 KiB
Radio 单选框
在一组备选项中进行单选
基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
:::demo 要使用 Radio 组件,只需要设置v-model
绑定变量,选中意味着变量的值为相应 Radio label
属性的值,label
可以是String
或者Number
。
<template>
<el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
<el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
:::
禁用状态
单选框不可用的状态。
:::demo 注意:请牢记,选中的条件是绑定的变量值等于label
中的值。只要在el-radio
元素中设置disabled
属性即可,它接受一个Boolean
,true
为禁用。
<template>
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio1: '选中且禁用'
};
}
}
</script>
:::
单选框组
适用于在多个互斥的选项中选择的场景
:::demo 结合el-radio-group
元素和子元素el-radio
可以实现单选组,在el-radio-group
中绑定v-model
,在el-radio
中设置好label
即可,无需再给每一个el-radio
绑定变量,另外,还提供了change
事件来响应变化,它会传入一个参数value
。
<template>
<el-radio-group v-model="radio2">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template>
<script>
export default {
data () {
return {
radio2: 3
};
}
}
</script>
:::
按钮样式
按钮样式的单选组合。
:::demo 只需要把el-radio
元素换成el-radio-button
元素即可,此外,Element 还提供了size
属性给按钮组,支持large
和small
两种(如果不设定为默认)。
<template>
<el-radio-group v-model="radio3">
<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-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
<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-button label="深圳"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
<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-group>
</template>
<script>
export default {
data () {
return {
radio3: '上海',
radio4: '上海',
radio5: '上海'
};
}
}
</script>
:::
Radio Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | Radio 的 value | string,number,boolean | — | — |
disabled | 是否禁用 | boolean | — | false |
name | 原生 name 属性 | string | — | — |
Radio-group Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | Radio 按钮组尺寸 | string | large, small | — |
fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
Radio-group Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
Radio-button Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | Radio 的 value | string,number | — | — |
disabled | 是否禁用 | boolean | — | false |