WU-UIRadio 单选框
单选框用于有一个选择，用户只能选择其中一个的场景。
平台兼容性
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
基本使用
该组件需要搭配 radioGroup 组件使用，以便用户进行操作时，获得当前单选框组的选中情况 通过 v-model 给 radioGroup 组件绑定一个变量，对应的 name 将会被选中
vue
<template>
<wu-radio-group
v-model="radiovalue1"
placement="column"
@change="groupChange"
>
<wu-radio
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in radiolist1"
:key="index"
:label="item.name"
:name="item.name"
@change="radioChange"
>
</wu-radio>
</wu-radio-group>
</template>
<script>
export default {
data() {
return {
// 基本案列数据
radiolist1: [
{
name: 'JavaScript',
disabled: false
},
{
name: 'Python',
disabled: false
},
{
name: 'Java',
disabled: false
}, {
name: 'C++',
disabled: false
}
],
// wu-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
radiovalue1: 'JavaScript',
};
},
methods: {
groupChange(n) {
console.log('groupChange', n);
},
radioChange(n) {
console.log('radioChange', n);
}
}
};
</script><template>
<wu-radio-group
v-model="radiovalue1"
placement="column"
@change="groupChange"
>
<wu-radio
:customStyle="{marginBottom: '8px'}"
v-for="(item, index) in radiolist1"
:key="index"
:label="item.name"
:name="item.name"
@change="radioChange"
>
</wu-radio>
</wu-radio-group>
</template>
<script>
export default {
data() {
return {
// 基本案列数据
radiolist1: [
{
name: 'JavaScript',
disabled: false
},
{
name: 'Python',
disabled: false
},
{
name: 'Java',
disabled: false
}, {
name: 'C++',
disabled: false
}
],
// wu-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
radiovalue1: 'JavaScript',
};
},
methods: {
groupChange(n) {
console.log('groupChange', n);
},
radioChange(n) {
console.log('radioChange', n);
}
}
};
</script>自定义形状
可以通过设置 shape 为 square 或者 circle ，将单选框设置为方形或者圆形
html
<wu-radio-group v-model="value">
<wu-radio shape="circle" label="围棋赌酒到天明"></wu-radio>
</wu-radio-group><wu-radio-group v-model="value">
<wu-radio shape="circle" label="围棋赌酒到天明"></wu-radio>
</wu-radio-group>禁用radio
设置 disabled 为 true ，即可禁用某个组件，让用户无法点击
html
<wu-radio-group v-model="value">
<wu-radio :disabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group><wu-radio-group v-model="value">
<wu-radio :disabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>是否禁止点击提示语选中单选框
设置 labelDisabled 为 true ，即可禁止点击提示语选中单选框
html
<wu-radio-group v-model="value">
<wu-radio :labelDisabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group><wu-radio-group v-model="value">
<wu-radio :labelDisabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>自定义颜色
此处所指的颜色，为 radio 选中时的背景颜色，参数为 activeColor
html
<wu-radio-group v-model="value">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group><wu-radio-group v-model="value">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>横向排列形式
可以通过设置 placement 为 row 或者 column ，将单选框设置为横向排列或者竖向排列
html
<wu-radio-group
v-model="value"
placement="row">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group><wu-radio-group
v-model="value"
placement="row">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>横向两端排列形式
可以通过设置 iconPlacement 为 left 或者 right ，将单选框勾选图标的对齐设置为左对齐或者右对齐
html
<wu-radio-group
v-model="value"
iconPlacement="right">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group><wu-radio-group
v-model="value"
iconPlacement="right">
<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>API
Radio Props
注意：radio 和 radio-group 二者同名参数中，radio的参数优先级更高。
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | radio的名称 | String / Number | - | - |
| shape | 形状，square为方形，circle为圆型 | String | square | square / circle |
| disabled | 是否禁用 | Boolean | - | - |
| labelDisabled | 是否禁止点击提示语选中单选框 | String / Boolean | - | - |
| activeColor | 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 | String | - | - |
| inactiveColor | 未选中的颜色 | String | - | - |
| iconSize | 图标的大小，单位px | String / Number | - | - |
| labelSize | label的字体大小，px单位 | String / Number | - | - |
| label | label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式 | String / Number | - | - |
| size | 整体的大小 | String / Number | - | - |
| iconColor | 图标颜色 | String | - | - |
| labelColor | label的颜色 | String | - | - |
RadioGroup Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| value / modelValue | 绑定的值 | String / Number / Boolean | '' | - |
| disabled | 是否禁用全部radio | Boolean | false | true |
| shape | 形状，circle-圆形，square-方形 | String | circle | circle / square |
| activeColor | 选中状态下的颜色，如子组件设置此值，将会覆盖本值 | String | #2979ff | - |
| inactiveColor | 未选中的颜色 | String | #c8c9cc | - |
| name | 标识符 | String | - | - |
| size | 整个组件的尺寸，默认px | String / Number | 18 | - |
| placement | 布局方式，row-横向，column-纵向 | String | row | column |
| label | 文本 | String | - | - |
| labelColor | label的字体颜色 | String | #303133 | - |
| labelSize | label的字体大小，px单位 | String / Number | 14 | - |
| labelDisabled | 是否禁止点击文本操作 | Boolean | false | true / false |
| iconColor | 图标颜色 | String | #ffffff | - |
| iconSize | 图标的大小，单位px | String / Number | 12 | - |
| borderBottom | 竖向配列时，是否显示下划线 | Boolean | false | true / false |
| iconPlacement | 勾选图标的对齐方式，left-左边，right-右边 | String | left | left / right |
Radio Event
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| change | 某个 radio 状态发生变化时触发(选中状态) | name: 通过 props 传递的 name 值 |
RadioGroup Event
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| change | 任意一个 radio 状态发生变化时触发 | name: 值为 radio 通过 props 传递的 name 值 |