Radio 单选按钮

使用指南

Component({
  data: {
    radio1: '1',
    radio2: '1',
    radio3: '',
    radio4: '2',
    radio5: '2',
    radio6: '2',
    radio7: '2',
    radio8: '2',
  },

  onChange(event) {
    const { key } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail.value,
    });
  },

  onClick(event) {
    const { name } = event.currentTarget.dataset;
    this.setData({
      radio8: name,
    });
  },
});

<view class="container">
  基础
  <tms-radio-group data-key="radio1" value="{{ radio1 }}" bind:on-change="onChange">
    <tms-radio name="1">单选框 1</tms-radio>
    <tms-radio name="2">单选框 2</tms-radio>
  </tms-radio-group>

  禁止所有
  <tms-radio-group data-key="radio2" disabled value="{{ radio2 }}" bind:on-change="onChange">
    <tms-radio name="1">单选框 1</tms-radio>
    <tms-radio name="2">单选框 2</tms-radio>
  </tms-radio-group>

  禁止单个
  <tms-radio-group data-key="radio3" value="{{ radio2 }}" bind:on-change="onChange">
    <tms-radio name="1" disabled>单选框 1</tms-radio>
    <tms-radio name="2">单选框 2</tms-radio>
  </tms-radio-group>

  size 变化
  <tms-radio-group data-key="radio5" value="{{ radio5 }}" bind:on-change="onChange">
    <tms-radio name="1" icon-size="34">单选框 1</tms-radio>
    <tms-radio name="2" icon-size="34">单选框 2</tms-radio>
  </tms-radio-group>


  排版变化
  <tms-radio-group data-key="radio6" value="{{ radio6 }}" bind:on-change="onChange" direction="row">
    <tms-radio name="1">单选框 1</tms-radio>
    <tms-radio name="2">单选框 2</tms-radio>
  </tms-radio-group>
</view>

API

属性	说明	类型	可选值	默认值
use-icon-slot	是否使用 icon 插槽	Boolean	—	false
icon-size	图标大小，默认单位为rpx	String,Number	—	28rpx
checked-icon	勾选状态图标，支持内置icon和外链	String	—	radio-active
uncheck-icon	未勾选状态图标，支持内置icon和外链	String	—	radio
value	当前选中项的标识符	String, Number	—	—
disabled	是否为禁用状态	Boolean	—	false
name	标识符		any	—

EVENTS

事件名	说明	参数
bind:on-change	当绑定值变化时触发的事件	— 当前值

插槽

插槽名称	说明
—	自定义文本
icon	自定义图标

RadioGroup 属性

属性	说明	类型	可选值	默认值
value	当前选中项的标识符	any	—	—
disabled	是否禁用所有单选框	Boolean	—	false
name	在表单内提交时的标识符	String	—	—
direction	选项排版方向	column, row	—	column

CSS变量

// 字体大小
--radio-label-size: 26rpx;
// 文本颜色
--radio-label-color: #333;
// 勾选状态文本颜色
--radio-label-checked-color: #333;