Radio 单选框

引入

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

代码演示

基础用法

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

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

禁用状态

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

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

自定义颜色

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

自定义图标

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

  1. <van-radiov-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. exportdefault{
  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-groupv-model="radio">
  2. <van-cell-group>
  3. <van-celltitle="单选框 1"clickable @click="radio = '1'">
  4. <van-radioname="1"/>
  5. </van-cell>
  6. <van-celltitle="单选框 2"clickable @click="radio = '2'">
  7. <van-radioname="2"/>
  8. </van-cell>
  9. </van-cell-group>
  10. </van-radio-group>

API

Radio Props

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

RadioGroup Props

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

Radio Events

事件名说明回调参数
click点击单选框时触发event: Event

RadioGroup Events

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

Radio Slots

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

Radio 单选框 - 图1