van-radio button
时间: 2025-06-05 14:34:45 浏览: 22
### Vant Radio Button 的使用与实现
Vant 是一个基于 Vue.js 的移动端组件库,提供了丰富的 UI 组件来帮助开发者快速构建移动应用界面。`van-radio` 和 `van-radio-group` 是其中用于单选按钮的两个核心组件。
#### 基本概念
`van-radio` 表示单独的一个单选框,而 `van-radio-group` 则是一个容器组件,用来包裹多个 `van-radio` 并管理它们的状态。通过绑定 `v-model`,可以轻松获取当前被选中的选项[^2]。
#### 安装与引入
要使用 Vant 中的 `van-radio` 及其相关功能,需先安装 Vant 库并按需加载所需的组件:
```bash
npm i vant
```
接着,在项目中引入所需模块:
```javascript
import { RadioGroup, Radio } from 'vant';
import 'vant/lib/radio/style'; // 引入样式文件
import 'vant/lib/radio-group/style';
export default {
components: {
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio,
},
};
```
#### 使用方法
以下是 `van-radio` 和 `van-radio-group` 的基本用法示例:
```html
<template>
<div>
<!-- 单独使用的 van-radio -->
<van-radio v-model="radioValue" name="option1">Option 1</van-radio>
<!-- 配合 van-radio-group 使用 -->
<van-radio-group v-model="groupValue">
<van-radio name="apple">Apple</van-radio>
<van-radio name="banana">Banana</van-radio>
<van-radio name="cherry">Cherry</van-radio>
</van-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radioValue: '', // 控制单独的 van-radio 状态
groupValue: 'apple', // 控制 van-radio-group 的状态
};
},
};
</script>
```
在此例子中:
- 当前选中的值会存储到 `data()` 方法返回的对象属性中。
- 如果需要动态更新数据,则可以通过修改这些变量完成操作[^3]。
#### 属性说明
| 参数名 | 描述 | 类型 | 默认值 |
|--------------|--------------------------|----------|--------|
| `name` | 对应输入控件 value 值 | string\|number | —— |
| `disabled` | 是否禁用 | boolean | false |
| `icon-size` | 图标的大小 | number\|string | 20px |
对于 `van-radio-group` 而言,它支持额外的一些参数比如方向控制(`direction`)等[^4]。
#### 自定义样式
如果希望调整默认外观,可通过 CSS 或者利用插槽机制来自定义内容展示形式。例如设置不同的字体颜色或者背景图片作为图标替代品等等[^5]。
---
阅读全文
相关推荐


















