单选框用于有一个选择,用户只能选择其中一个的场景。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
√ | √ | √ | √ |
#基本使用
- 该组件需要搭配
radioGroup
组件使用,以便用户进行操作时,获得当前单选框组的选中情况 - 通过
v-model
给radioGroup
组件绑定一个变量,对应的name
将会被选中
<template> <u-radio-group v-model="radiovalue1" placement="column" @change="groupChange" > <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name" @change="radioChange" > </u-radio> </u-radio-group> </template> <script> export default { data() { return { // 基本案列数据 radiolist1: [{ name: '苹果', disabled: false }, { name: '香蕉', disabled: false }, { name: '橙子', disabled: false }, { name: '榴莲', disabled: false } ], // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中 radiovalue1: '苹果', }; }, methods: { groupChange(n) { console.log('groupChange', n); }, radioChange(n) { console.log('radioChange', n); } } }; </script>
copy
#自定义形状
可以通过设置shape
为square
或者circle
,将单选框设置为方形或者圆形
<u-radio-group v-model="value"> <u-radio shape="circle" label="月明人倚楼"></u-radio> </u-radio-group>
copy
#禁用radio
设置disabled
为true
,即可禁用某个组件,让用户无法点击
<u-radio-group v-model="value"> <u-radio :disabled="true" label="明月几时有"></u-radio> </u-radio-group>
copy
#是否禁止点击提示语选中复选框
设置labelDisabled
为true
,即可禁止点击提示语选中复选框
<u-radio-group v-model="value"> <u-radio :labelDisabled="true" label="明月几时有"></u-radio> </u-radio-group>
copy
#自定义颜色
此处所指的颜色,为radio
选中时的背景颜色,参数为activeColor
<u-radio-group v-model="value"> <u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio> </u-radio-group>
copy
#横向排列形式
可以通过设置placement
为row
或者column
,将复选框设置为横向排列或者竖向排列
<u-radio-group v-model="value" placement="row"> <u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio> </u-radio-group>
copy
#横向两端排列形式
可以通过设置iconPlacement
为left
或者right
,将复选框勾选图标的对齐设置为左对齐或者右对齐
<u-radio-group v-model="value" iconPlacement="right"> <u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio> </u-radio-group>