Radio 单选框

基础用法

通过value绑定值当前选中项的 name

  1. <van-radio-group value="{{ radio }}" bind:change="onChange">
  2.   <van-radio name="1">单选框 1</van-radio>
  3.   <van-radio name="2">单选框 2</van-radio>
  4. </van-radio-group>
  1. Page({
  2.   data: {
  3.     radio: '1'
  4.   },
  5.   onChange(event) {
  6.     this.setData({
  7.       radio: event.detail
  8.   }
  9. });

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项

禁用文本点击

  1. <van-radio-group value="{{ radio }}" bind:change="onChange">
  2.   <van-radio name="1" icon-disabled>单选框 1</van-radio>
  3.   <van-radio name="2" icon-disabled>单选框 2</van-radio>
  4. </van-radio-group>

通过checked-color属性设置选中状态的图标颜色

  1. <van-radio-group value="{{ radio }}" bind:change="onChange">
  2.  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
  3.  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>

自定义大小

通过icon-size属性可以自定义图标的大小

自定义图标

  1. <van-radio-group value="{{ radio }}" bind:change="onChange">
  2.   <van-radio use-icon-slot value="{{ radio }}" name="1">
  3.     自定义图标
  4.     <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
  5.   </van-radio>
  6.   <van-radio use-icon-slot value="{{ radio }}" name="2">
  7.     自定义图标
  8.     <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
  9.   </van-radio>
  10. </van-radio-group>
  1. Page({
  2.   data: {
  3.     radio: true,
  4.     icon: {
  5.       normal: '//img.yzcdn.cn/icon-normal.png',
  6.     }
  7.   },
  8.   onChange(event) {
  9.     this.setData({
  10.       radio: event.detail
  11.     });
  12.   }
  13. });

与 Cell 组件一起使用

此时你需要再引入和CellGroup组件。

  1. Page({
  2.   data: {
  3.     radio: '1'
  4.   },
  6.   onChange(event) {
  7.     this.setData({
  8.       radio: event.detail
  9.     });
  10.   },
  12.   onClick(event) {
  13.     const { name } = event.currentTarget.dataset;
  14.     this.setData({
  15.       radio: name
  16.     });
  17.   }
  18. });

API

Radio Props

Radio Event

Radio 外部样式类