Vant Radio 单选框
Vant 单选框 Ra组建主要用于单选框,圆型单选框、方型单选框、角色单选框等。
import Vue from 'vue'; import { RaGroup, Ra } from 'vant'; Vue.use(Ra); Vue.use(RaGroup);
通过v-model绑定值当前选中项的 name
<van-ra-group v-model="ra"> <van-ra name="1">单选框 1</van-ra> <van-ra name="2">单选框 2</van-ra> </van-ra-group>
export default { data() { return { ra: '1' } } };
将direction设置为horizontal后,单选框组会变成水平排列
<van-ra-group v-model="ra" direction="horizontal"> <van-ra name="1">单选框 1</van-ra> <van-ra name="2">单选框 2</van-ra> </van-ra-group>
通过disabled选项切换,在Ra上设置disabled可以禁用单个选项
<van-ra-group v-model="ra" disabled> <van-ra name="1">单选框 1</van-ra> <van-ra name="2">单选框 2</van-ra> </van-ra-group>
设置label-disabled后,点击单选框图标以外的不会触发切换
<van-ra-group v-model="ra"> <van-ra name="1" icon-disabled>单选框 1</van-ra> <van-ra name="2" icon-disabled>单选框 2</van-ra> </van-ra-group>
通过square设置选中状态的图标颜色
<van-ra-group v-model="ra"> <van-ra name="1" shape="square">单选框 1</van-ra> <van-ra name="2" shape="square">单选框 2</van-ra> </van-ra-group>
通过checked-color设置选中状态的图标颜色
<van-ra-group v-model="ra"> <van-ra name="1" checked-color="#07c160">单选框 1</van-ra> <van-ra name="2" checked-color="#07c160">单选框 2</van-ra> </van-ra-group>
通过icon-size可以图标的大小
<van-ra-group v-model="ra"> <van-ra name="1" icon-size="24px">单选框 1</van-ra> <van-ra name="2" icon-size="24px">单选框 2</van-ra> </van-ra-group>
通过icon插槽图标,并通过slotProps判断是否为选中状态
<van-ra-group v-model="ra"> <van-ra name="1"> 单选框 1 <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" /> </template> </van-ra> <van-ra name="2"> 单选框 2 <template #icon="props"> <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" /> </template> </van-ra> </van-ra-group> <style> .img-icon { height: 20px; } </style>
export default { data() { return { ra: '1', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', }; },
此时你需要再引入Cell和CellGroup组件
<van-ra-group v-model="ra"> <van-cell-group> <van-cell title="单选框 1" clickable @click="ra = '1'"> <template #right-icon> <van-ra name="1" /> </template> </van-cell> <van-cell title="单选框 2" clickable @click="ra = '2'"> <template #right-icon> <van-ra name="2" /> </template> </van-cell> </van-cell-group> </van-ra-group>
API
round
false
false
right
Ra Events