Checkbox 复选框

使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-checkbox": "wuss-weapp/w-checkbox/index",
}

图片演示

代码演示

<w-pane title="Checkbox" desc="复选框" />
<w-pane desc="Default" />
<w-cell-group>
    <w-checkbox options="{{ items1 }}" bind:onChange="handleChange" />
</w-cell-group>
<view>{{ items1Str }}</view>
<w-pane desc="Disabled" />
<w-cell-group>
    <w-checkbox options="{{ items2 }}" bind:onChange="handleChange" />
</w-cell-group>
<w-pane desc="Directon" />
<w-cell-group>
    <w-checkbox
     direction="right"
     options="{{ items1 }}"
     bind:onChange="handleChange"
    />
</w-cell-group>
<w-pane desc="IconType" />
<w-cell-group>
    <w-checkbox
   icon-type="circle"
     direction="right"
     options="{{ items1 }}"
     bind:onChange="handleChange"
    />
  <w-checkbox
   icon-type="box"
     direction="right"
     options="{{ items1 }}"
     bind:onChange="handleChange"
    />
  <w-checkbox
   icon-type="check"
     direction="right"
     options="{{ items1 }}"
     bind:onChange="handleChange"
    />
</w-cell-group>
<w-pane desc="ArrayKeys" />
<w-cell-group>
    <w-checkbox
     direction="right"
     options="{{ items3 }}"
     bind:onChange="handleChange"
    />
</w-cell-group>

const MOCK_DATA = {
  productName: 'iphone X max',
  total: 1,
  num: 642135,
  id: 2143324234,
  price: 12700.0,
  desc: 'iphone is good',
};
data: {
  items1Str: '',
  items1: [
    {
      text: '复选框1',
      ...MOCK_DATA,
    },
    {
      text: '复选框2',
      ...MOCK_DATA,
    },
    {
      text: '复选框3',
      ...MOCK_DATA,
    },
  ],
  items2: [
    {
      text: '复选框1',
      ...MOCK_DATA,
    },
    {
      text: '复选框2',
      ...MOCK_DATA,
      disabled: true,
    },
    {
      text: '复选框3',
      ...MOCK_DATA,
    },
  ],
  items3: ['测试1','测试2','测试3','测试4','测试5'],
},
handleChange(e) {
  console.log(e.detail.checked)
  this.setData({ items1Str: JSON.stringify(e.detail.checked) });
},

API

Attribute 属性

Event 事件

Class 自定义类名