May 07, 2021 Vant
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
Vue.use(Radio);
Vue.use(RadioGroup);
The name of the currently selected item is bound by the v-model binding value
<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'
}
}
};
When the direction property is set to horizontal, the single-box group becomes horizontally arranged
<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>
By disabled property disabling option switching, setting disabled on Radio disables individual options
<van-radio-group v-model="radio" disabled>
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
When you set the label-disabled property, clicking on anything other than the ticket icon does not trigger a switchover
<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>
Set the selected icon color with the square property
<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>
Set the selected icon color with the checked-color property
<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>
The icon-size property allows you to customize the size of the icon
<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>
Customize the icon with icon slots and determine if it's selected with 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',
};
},
};
At this point you need to re-introduce cell and CellGroup components
<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>
Parameters | Description | Type | The default |
---|---|---|---|
name | Identifier | any |
-
|
shape |
Shape, with an optional value of
square
|
string |
round |
disabled | Whether it is disabled or not | boolean |
false |
label-disabled | Whether to disable text content clicking | boolean |
false |
label-position | Text location, optional value left | string |
right |
icon-size | Icon size, the default unit is px | number | string | 20px |
checked-color | Check the status color | string |
#1989fa
|
Parameters | Description | Type | The default |
v-model | The identifier of the currently selected item | any | - |
disabled | Whether to disable all ticket boxes | boolean | false |
direction v2.5.0 | Arrange directions, with an optional value of Horizontal | string | vertical |
icon-size v2.2.3
|
The icon size of all tickets, the default unit is px
|
number | string | 20px |
checked-color v2.2.3 | The checked status color for all the tickets | string | #1989fa |
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when you click on the ticket | event: Event |
The name of the event | Description | Callback parameters |
---|---|---|
change | The event that is triggered when the binding value changes | The name of the currently selected item |
Name | Description | SlotProps |
---|---|---|
default | Custom text | - |
icon | Custom icons | Checked: Whether it is selected or not |