Checkbox 复选框

使用指南

Component({
  data: {
    checked1: true,
    checked2: true,
    checked3: false,
    checked4: false,
    checked5: false,
    checked6: false,
    checked7: false,
    result1: [],
    result2: [],
    result3: [],
    result4: [],
    list: ['a', 'b', 'c'],
  },

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

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

  toggle(event) {
    const { index } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${index}`);
    checkbox.toggle();
  },
});

<view class="container">
  <view>
    基础用法
    <tms-checkbox data-key='checked1' value="{{ checked1 }}" bind:on-change="onChange">复选框</tms-checkbox> 
  </view>


  <view>
    自定义大小 
    <tms-checkbox data-key='checked2' value="{{ checked2 }}" icon-size="26" bind:on-change="onChange">复选框</tms-checkbox> 
  </view>

  <view>
    禁用状态 
    <tms-checkbox disabled data-key='checked4' value="{{ checked4 }}" bind:on-change="onChange">复选框</tms-checkbox> 
  </view>

  复选框组
  <tms-checkbox-group
    data-key="result1"
    value="{{ result1 }}"
    bind:on-change="onGroupChange"
  >
    <tms-checkbox name="a">复选框 a</tms-checkbox>
    <tms-checkbox name="b">复选框 b</tms-checkbox>
    <tms-checkbox name="c">复选框 b</tms-checkbox>
  </tms-checkbox-group>

  禁止所有
  <tms-checkbox-group
    data-key="result4"
    disabled
    value="{{ result4 }}"
    bind:on-change="onGroupChange"
  >
    <tms-checkbox name="a">复选框 a</tms-checkbox>
    <tms-checkbox name="b">复选框 b</tms-checkbox>
    <tms-checkbox name="c">复选框 c</tms-checkbox>
  </tms-checkbox-group>

  禁止单个
  <tms-checkbox-group
    data-key="result2"
    value="{{ result2 }}"
    bind:on-change="onGroupChange"
  >
    <tms-checkbox name="a" disabled>复选框 a</tms-checkbox>
    <tms-checkbox name="b">复选框 b</tms-checkbox>
    <tms-checkbox name="c">复选框 c</tms-checkbox>
  </tms-checkbox-group>

  排版变化
  <tms-checkbox-group
    data-key="result3"
    value="{{ result3 }}"
    bind:on-change="onGroupChange"
    direction="row"
  >
    <tms-checkbox name="a">复选框 a</tms-checkbox>
    <tms-checkbox name="b">复选框 b</tms-checkbox>
    <tms-checkbox name="c">复选框 c</tms-checkbox>
  </tms-checkbox-group>
</view>

checkbox api

属性	说明	类型	可选值	默认值
value	是否为选中状态	Boolean	—	false
disabled	是否禁用单选框	Boolean	—	false
iconSize	icon 图标大小,默认使用rpx单位	String, Number	—	40rpx
useIconSlot	是否使用 icon slot	Boolean	—	false
checked-icon	勾选状态图标，支持内置icon和外链	String	—	checkbox-active
uncheck-icon	未勾选状态图标，支持内置icon和外链	String	—	checkbox
name	标识 Checkbox 名称	String	—	—

事件

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

插槽

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

checkbox-group api

属性	说明	类型	可选值	默认值
value	所有选中项的 name	Array	—	false
disabled	是否禁用所有单选框	Boolean	—	false
name	在表单内提交时的标识符	String	—	—
direction	选项排版方向	column, row	—	column
container-style	check-box父元素样式	String	—	''

CheckboxGroup 事件

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

CSS变量

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