支付寶小程序擴展表單 復(fù)選框·Am-checkbox

復(fù)選框。 對齊 ant design checkbox 的設(shè)計，當(dāng) ctrlChecked===undefined （默認(rèn)）時 am-checkbox 是非受控組件，否則為受控組件。

掃碼體驗

示例代碼

{
  "defaultTitle": "am-checkbox",
  "usingComponents": {
    "list": "mini-ali-ui/es/list/index",
    "list-item": "mini-ali-ui/es/list/list-item/index",
    "am-checkbox": "mini-ali-ui/es/am-checkbox/index",
    "button": "mini-ali-ui/es/button/index"
  }
}

<list>
  <view slot="header">
    列表+復(fù)選框（非受控）
  </view>
  <block a:for="{{items}}">
    <list-item
      thumb=""
      arrow="{{false}}"
      index="{{index}}"
      key="items-{{index}}"
      last="{{index === (items.length - 1)}}"
    >
      <view style="display: flex; align-items: center;">
        <am-checkbox data-id="{{item.id}}" id="{{item.id}}" value="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" />
        <label for="{{item.id}}">{{item.title}}</label>
      </view>
    </list-item>
  </block>
</list>


<view style="padding: 24rpx 0 0 24rpx;">
  <button capsuleSize="small" shape="capsule" type="primary" onTap="checkedON" style="margin-left: 20rpx;">全選</button>
  <button capsuleSize="small" shape="capsule" type="primary" onTap="checkedOFF" style="margin-left: 20rpx;">不全選</button>
</view>


<list>
  <view slot="header">
    列表+復(fù)選框（受控）
  </view>
  <block a:for="{{items1}}">
    <list-item
      thumb=""
      arrow="{{false}}"
      index="{{index}}"
      key="items-{{index}}"
      last="{{index === (items.length - 1)}}"
    >
      <view style="display: flex; align-items: center;">
        <am-checkbox data-id="{{item.id}}" id="{{item.id}}" value="{{item.value}}" disabled="{{item.disabled}}" ctrlChecked="{{item.ctrlChecked}}" onChange="onChange" />
        <label for="{{item.id}}">{{item.title}}</label>
      </view>
    </list-item>
  </block>
</list>

Page({
  data: {
    items: [
      { value: 'a', title: '復(fù)選框-默認(rèn)未選中', id: 'checkbox1' },
      { checked: true, value: 'b', title: '復(fù)選框-默認(rèn)選中', id: 'checkbox2' },
      { checked: true, disabled: true, value: 'c', title: '復(fù)選框-默認(rèn)選中disabled', id: 'checkbox3' },
    ],
    items1: [
      { ctrlChecked: false, disabled: false, value: 'd', title: '復(fù)選框-默認(rèn)未選中', id: 'checkbox4' },
      { ctrlChecked: true, disabled: true, value: 'e', title: '復(fù)選框-默認(rèn)未選中disabled', id: 'checkbox5' },
      { ctrlChecked: true, value: 'f', title: '復(fù)選框-默認(rèn)選中', id: 'checkbox6' },
    ],
  },
  onChange(e) {
    const { id } = e.currentTarget.dataset;
    const { value } = e.detail;
    const { items1 } = this.data;
    items1.forEach((element) => {
      if (element.id === id) {
        // eslint-disable-next-line no-param-reassign
        element.ctrlChecked = value;
      }
    });
    this.setData({
      items1
    });
  },
  // 全選
  checkedON() {
    this.checkedAll(true);
  },
  // 全不選
  checkedOFF() {
    this.checkedAll(false);
  },
  checkedAll(status) {
    const { items1 } = this.data;
    items1.forEach((element) => {
      // eslint-disable-next-line no-param-reassign
      element.ctrlChecked = status;
    });
    this.setData({
      items1
    });
  },
});

屬性