Vant Radio 单选框介绍

发布时间：2023-04-20 11:33:12 所属栏目：教程来源：

导读：Vant 单选框 Radio组建主要用于单选框调用，圆型单选框、方型单选框、角色单选框等。

引入
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';

Vue.use(Radio);
Vue.use(

Vant 单选框 Radio组建主要用于单选框调用，圆型单选框、方型单选框、角色单选框等。

引入
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';

Vue.use(Radio);
Vue.use(RadioGroup);
基础用法
通过v-model绑定值当前选中项的 name

<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
export default {
data() {
return {
radio: '1'
}
}
};
水平排列
将direction属性设置为horizontal后，单选框组会变成水平排列

<van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
禁用状态
通过disabled属性禁止选项切换，在Radio上设置disabled可以禁用单个选项

<van-radio-group v-model="radio" disabled>
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
禁用文本点击
设置label-disabled属性后，点击单选框图标以外的内容不会触发切换

<van-radio-group v-model="radio">
<van-radio name="1" icon-disabled>单选框 1</van-radio>
<van-radio name="2" icon-disabled>单选框 2</van-radio>
</van-radio-group>
自定义形状
通过square属性设置选中状态的图标颜色

<van-radio-group v-model="radio">
<van-radio name="1" shape="square">单选框 1</van-radio>
<van-radio name="2" shape="square">单选框 2</van-radio>
</van-radio-group>
自定义颜色
通过checked-color属性设置选中状态的图标颜色

<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
</van-radio-group>
自定义大小
通过icon-size属性可以自定义图标的大小

<van-radio-group v-model="radio">
<van-radio name="1" icon-size="24px">单选框 1</van-radio>
<van-radio name="2" icon-size="24px">单选框 2</van-radio>
</van-radio-group>
自定义图标
通过icon插槽自定义图标，并通过slotProps判断是否为选中状态

<van-radio-group v-model="radio">
<van-radio name="1">
单选框 1
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-radio>
<van-radio name="2">
单选框 2
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-radio>
</van-radio-group>

<style>
.img-icon {
height: 20px;
}
</style>
export default {
data() {
return {
radio: '1',
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
},
与 Cell 组件一起使用
此时你需要再引入Cell和CellGroup组件

<van-radio-group v-model="radio">
<van-cell-group>
<van-cell title="单选框 1" clickable @click="radio = '1'">
<template #right-icon>
<van-radio name="1" />
</template>
</van-cell>

<van-cell title="单选框 2" clickable @click="radio = '2'">
<template #right-icon>
<van-radio name="2" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!