# Radio 单选框
单选框用于有一个选择,用户只能选择其中一个的场景。
# 平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
# 基本使用
- 该组件需要搭配
radioGroup
组件使用,以便用户进行操作时,获得当前单选框组的选中情况 - 通过
v-model
给radioGroup
组件绑定一个变量,对应的name
将会被选中
<template>
<uv-radio-group v-model="radiovalue">
<uv-radio
:customStyle="{margin: '8px'}"
v-for="(item, index) in radiolist"
:key="index"
:label="item.name"
:name="item.name">
</uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
// 基本案列数据
radiolist: [{
name: '苹果',
disabled: false
}, {
name: '香蕉',
disabled: false
}, {
name: '橙子',
disabled: false
}, {
name: '榴莲',
disabled: false
}],
// uv-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
radiovalue: '苹果',
}
}
}
</script>
# 自定义形状
可以通过设置shape
为square
或者circle
,将单选框设置为方形或者圆形
<template>
<uv-radio-group v-model="radiovalue">
<uv-radio
shape="square"
:customStyle="{margin: '8px'}"
v-for="(item, index) in radiolist"
:key="index"
:label="item.name"
:name="item.name">
</uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
radiolist: [{
name: '苹果',
disabled: false
}, {
name: '香蕉',
disabled: false
}],
radiovalue: '苹果'
}
}
}
</script>
# 禁用radio
设置disabled
为true
,即可禁用某个组件,让用户无法点击
<template>
<uv-radio-group v-model="radiovalue">
<uv-radio :disabled="true" name="苹果" label="苹果"></uv-radio>
<uv-radio :disabled="true" name="梨子" label="梨子"></uv-radio>
<uv-radio :disabled="false" name="香蕉" label="香蕉"></uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
radiovalue: '苹果'
}
}
}
</script>
# 自定义颜色
此处所指的颜色,为radio
选中时的背景颜色,参数为activeColor
<template>
<uv-radio-group v-model="radiovalue">
<uv-radio name="苹果" label="苹果"></uv-radio>
<uv-radio name="香蕉" activeColor="red" label="香蕉"></uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
radiovalue: '香蕉'
}
}
}
</script>
# 横向排列形式
可以通过设置placement
为row
或者column
,将复选框设置为横向排列或者竖向排列
<template>
<uv-radio-group v-model="radiovalue" placement="column">
<uv-radio name="苹果" label="苹果"></uv-radio>
<uv-radio name="香蕉" activeColor="red" label="香蕉"></uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
radiovalue: '香蕉'
}
}
}
</script>
# 横向两端排列形式
在placement="column"
前提下,可以通过设置iconPlacement
为left
或者right
,将复选框勾选图标的对齐设置为左对齐或者右对齐
<template>
<uv-radio-group
v-model="radiovalue"
placement="column"
iconPlacement="right">
<uv-radio name="苹果" label="苹果"></uv-radio>
<uv-radio name="香蕉" label="香蕉"></uv-radio>
</uv-radio-group>
</template>
<script>
export default {
data() {
return {
radiovalue: '香蕉'
}
}
}
</script>
# 完整示例
# API
# RadioGroup Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
value / v-model | 选中 name 的值 | String | Number | Boolean | - | - |
disabled | 是否禁用全部checkbox | Boolean | false | true | false |
shape | 形状,circle - 圆形,square - 方形 | String | circle | circle | square |
activeColor | 选中状态下的颜色,如子Checkbox 组件设置此值,将会覆盖本值 | String | #2979ff | - |
inactiveColor | 未选中的颜色 | String | #c8c9cc | - |
name | 标识符 | String | - | - |
size | 整个组件的尺寸,默认px。注意:该参数和iconSize应该同步设置,才能改变选框大小 | String | Number | 18 | - |
placement | 布局方式,row - 横向,column - 纵向 | String | row | row | column |
label | 文本 | String | - | - |
labelColor | label的字体颜色 | String | #303133 | - |
labelSize | label的字体大小,单位px(rpx) | String | Number | 14 | - |
labelDisabled | 是否禁止点击文本操作 | Boolean | false | true | false |
iconColor | 图标颜色 | String | #ffffff | - |
iconSize | 图标的大小,单位px(rpx) | String | Number | 12 | - |
borderBottom | 竖向配列时,是否显示下划线 | Boolean | false | true | false |
iconPlacement | 勾选图标的对齐方式,left - 左边,right - 右边 | String | left | left | right |
customStyle | 自定义样式,某些事件需要用到调整位置等作用 | Object | - | - |
# Radio Props
注意:radio
和radio-group
二者同名参数中,radio
的参数优先级更高。
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
name | radio的名称 | String | Number | Boolean | - | - |
shape | 形状,square为方形,circle为圆型 | String | circle | circle | square |
disabled | 是否禁用 | Boolean | - | - |
labelDisabled | 是否禁止点击提示语选中复选框 | String | Boolean | - | - |
activeColor | 选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值 | String | - | - |
inactiveColor | 未选中的颜色 | String | - | - |
iconSize | 图标的大小,单位px(rpx) | String | Number | - | - |
labelSize | label的字体大小,单位px(rpx) | String | Number | - | - |
label | label提示文字。如果文本较长存在文本不换行的问题,使用customStyle设置一个宽度即可,eg:customStyle="maxWidth: 300rpx;" | String | Number | - | - |
size | 整体的大小 | String | Number | - | - |
iconColor | 图标颜色 | String | - | - |
labelColor | label的颜色 | String | - | - |
customStyle | 自定义样式 | Object | String | - | - |
# Radio Slots
名称 | 说明 |
---|---|
default | 自定义label 内容,自定义后,labelDisabled 设置将会失效 |
icon | 自定义选中图标 |
# RadioGroup Events
事件名 | 说明 | 回调参数 |
---|---|---|
@change | 任一个radio 状态发生变化时触发 | name: 值为radio 通过props 传递的name 值 |
# Radio Events
事件名 | 说明 | 回调参数 |
---|---|---|
@change | 某个radio 状态发生变化时触发(选中状态) | name: 通过props 传递的name 参数 |