Radio 单选框

使用指南

  1. import { RadioGroup, Radio } from 'vant';
  2. Vue.use(RadioGroup);
  3. Vue.use(Radio);

代码演示

基础用法

通过v-model绑定值当前选中项的 name

  1. <van-radio-group v-model="radio">
  2. <van-radio name="1">单选框 1</van-radio>
  3. <van-radio name="2">单选框 2</van-radio>
  4. </van-radio-group>
  1. export default {
  2. data() {
  3. return {
  4. radio: '1'
  5. }
  6. }
  7. };

禁用状态

通过disabled属性禁止选项切换,在van-radio上设置disabled可以禁用单个选项

  1. <van-radio-group v-model="radio" disabled>
  2. <van-radio name="1">单选框 1</van-radio>
  3. <van-radio name="2">单选框 2</van-radio>
  4. </van-radio-group>

自定义颜色

  1. <van-radio checked-color="#07c160">复选框</van-radio>

自定义图标

通过 icon 插槽自定义图标,可以通过 slot-scope 判断是否为选中状态

  1. <van-radio v-model="checked">
  2. 自定义图标
  3. <img
  4. slot="icon"
  5. slot-scope="props"
  6. :src="props.checked ? icon.active : icon.normal"
  7. >
  8. </van-radio>
  1. export default {
  2. data() {
  3. checked: true,
  4. icon: {
  5. normal: '//img.yzcdn.cn/icon-normal.png',
  6. active: '//img.yzcdn.cn/icon-active.png'
  7. }
  8. }
  9. }

与 Cell 组件一起使用

此时你需要再引入CellCellGroup组件。

  1. <van-radio-group v-model="radio">
  2. <van-cell-group>
  3. <van-cell title="单选框 1" clickable @click="radio = '1'">
  4. <van-radio name="1" />
  5. </van-cell>
  6. <van-cell title="单选框 2" clickable @click="radio = '2'">
  7. <van-radio name="2" />
  8. </van-cell>
  9. </van-cell-group>
  10. </van-radio-group>

Radio API

参数说明类型默认值版本
name标识符任意类型--
shape形状,可选值为 squareStringround1.6.0
disabled是否为禁用状态Booleanfalse-
label-disabled是否禁用文本内容点击Booleanfalse1.1.13
label-position文本位置,可选值为 leftStringright1.1.13
checked-color选中状态颜色String#1989fa1.4.5

RadioGroup API

参数说明类型默认值版本
v-model当前选中项的标识符任意类型--
disabled是否禁用所有单选框Booleanfalse-

RadioGroup Event

事件名称说明回调参数
change当绑定值变化时触发的事件当前选中项的 name

Radio 插槽

名称说明slot-scope
-自定义文本-
icon自定义图标checked: 是否为选中状态

原文: https://youzan.github.io/vant/#/zh-CN/radio