Checkbox选择框

使用指南

在 app.json 或 index.json 中引入checkbox 组件

{
  "usingComponents": {
    "fs-checkbox-group": "path/components/checkbox-group/index",
    "fs-checkbox": "path/components/checkbox/index"
  }
}

1
2
3
4
5
6

代码演示

基本选择框

  <fs-checkbox value="{{checked00}}" full="{{false}}" bind:change="handleChange"/>
  <fs-checkbox value="{{checked}}" bind:change="handleChange"/>
  <fs-checkbox circle="{{false}}" value="{{checked}}" bind:change="handleChange">店铺名称</fs-checkbox>
  <fs-checkbox value="{{checked1}}" bind:change="handleChange">店铺名称</fs-checkbox>
  <fs-checkbox value="{{checked2}}" bind:change="handleChange">店铺名称</fs-checkbox>

1
2
3
4
5

自定义图标

<fs-checkbox value="{{checked3}}" icon="lock" bind:change="handleChange">全部员工</fs-checkbox>
<fs-checkbox value="{{checked4}}" icon="lock" bind:change="handleChange">全部员工</fs-checkbox>

1
2

禁用状态

<fs-checkbox value="{{checked5}}" disabled bind:change="handleChange">全部员工</fs-checkbox>
<fs-checkbox value="{{checked6}}" disabled bind:change="handleChange">全部员工</fs-checkbox>

1
2

媒体样式

  <fs-checkbox value="{{checked7}}" bind:change="handleChange" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user" custom-class="custom-user-img"/>
  </fs-checkbox>
  <fs-checkbox value="{{checked8}}" bind:change="handleChange" type="media" title="收银员" subtitle="账号：2314235346">
    <fs-icon name="user" custom-class="custom-user-img"/>
  </fs-checkbox>

1
2
3
4
5
6

多选

  <fs-checkbox-group value="{{checked9}}" bind:change="handleChange">
    <fs-checkbox name="1">世界</fs-checkbox>
    <fs-checkbox name="2">中国</fs-checkbox>
    <fs-checkbox name="3">湖北</fs-checkbox>
    <fs-checkbox name="4">武汉</fs-checkbox>
  </fs-checkbox-group>

1
2
3
4
5
6

最多选

  <fs-checkbox-group value="{{checked10}}" bind:change="handleChange" max="3">
    <fs-checkbox name="1">世界</fs-checkbox>
    <fs-checkbox name="2">中国</fs-checkbox>
    <fs-checkbox name="3">湖北</fs-checkbox>
    <fs-checkbox name="4">武汉</fs-checkbox>
  </fs-checkbox-group>

1
2
3
4
5
6

多选-禁用

<fs-checkbox-group value="{{checked11}}" disabled bind:change="handleChange">
  <fs-checkbox name="1">世界</fs-checkbox>
  <fs-checkbox name="2">中国</fs-checkbox>
  <fs-checkbox name="3">湖北</fs-checkbox>
  <fs-checkbox name="4">武汉</fs-checkbox>
</fs-checkbox-group>

1
2
3
4
5
6

自定义前缀-单选

  <fs-checkbox value="{{checked12}}" bind:change="handleChange">
    <view slot="prefix">
      <fs-icon name="wechatpay" custom-class="title-icon" />微信收款
    </view>
  </fs-checkbox>
  <fs-checkbox value="{{checked12}}" circle="{{false}}"  bind:change="handleChange">
    <view slot="prefix">
      微信收款
    </view>
  </fs-checkbox>

1
2
3
4
5
6
7
8
9
10

自定义前缀-多选

<fs-checkbox-group value="{{checked13}}" bind:change="handleChange">
    <fs-checkbox name="1">
      <view slot="prefix">
        <fs-icon name="wechatpay" custom-class="title-icon" />微信收款
      </view>
    </fs-checkbox>
    <fs-checkbox name="2">
      <view slot="prefix">
        <fs-icon name="jdpay" custom-class="title-icon" />支付宝收款
      </view>
    </fs-checkbox>
    <fs-checkbox name="3">
      <view slot="prefix">
        <fs-icon name="alipay" custom-class="title-icon" />京东收款
      </view>
    </fs-checkbox>
  </fs-checkbox-group>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

自定义后缀-单选

  <fs-checkbox value="{{checked14}}" bind:change="handleChange">
    <view slot="suffix">
      <fs-icon name="wechatpay" custom-class="title-icon" />
    </view>
    微信收款
  </fs-checkbox>
  <fs-checkbox value="{{checked14}}" bind:change="handleChange" circle="{{false}}">
    <view slot="suffix">
      <fs-icon name="wechatpay" custom-class="title-icon" />
    </view>
    微信收款
  </fs-checkbox>

1
2
3
4
5
6
7
8
9
10
11
12

自定义后缀-多选

 <fs-checkbox-group value="{{checked15}}" bind:change="handleChange">
    <fs-checkbox name="1">
      <view slot="suffix">
        <fs-icon name="wechatpay" custom-class="title-icon" />
      </view>
      微信收款
    </fs-checkbox>
    <fs-checkbox name="2">
      <view slot="suffix">
        <fs-icon name="jdpay" custom-class="title-icon" />
      </view>
      支付宝收款
    </fs-checkbox>
    <fs-checkbox name="3">
      <view slot="suffix">
        <fs-icon name="alipay" custom-class="title-icon" />
      </view>
      京东收款
    </fs-checkbox>
  </fs-checkbox-group>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

其他应用-删除

<fs-transition
  wx:for="{{ data }}"
  wx:key="{{ index }}"
  show
  name="fade">
  <fs-checkbox
    value
    circle="{{false}}"
    icon="minus-s"s
    bind:change="changeDele">
      {{item.name}}
  </fs-checkbox>
  </fs-transition>

1
2
3
4
5
6
7
8
9
10
11
12
13

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checked: true,
    checked00: true,
    checked0: true,
    checked1: true,
    checked2: false,
    checked3: true,
    checked4: false,
    checked5: true,
    checked6: false,
    checked7: true,
    checked8: false,
    checked9: [],
    checked10: [],
    checked11: ['1'],
    checked12: true,
    checked13: [],
    checked14: true,
    checked15: [],
    data: [{
      name: '删除列表1',
      value: '1'
    }, {
      name: '删除列表2',
      value: '2'
    }, {
      name: '删除列表3',
      value: '3'
    }]
  },
  handleChange (e) {
    const { key } = e.currentTarget.dataset
    this.setData({ [key]: e.detail })
  },
  changeDele (e) {
    let index = e.currentTarget.dataset.key
    console.log(index)
    let data = this.data.data.slice()
    data.splice(index, 1)
    this.setData({ data })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

Checkbox属性

参数	说明	类型	默认值
name	唯一值,单选可为空，多选必传作为唯一依据	`String`	-
value	当前是否选中	`Boolean`	`false`
disabled	是否禁用	`Boolean`	`false`
icon	自定义图标,可选值参考icon组件	`String`	`correct`
type	类型，可选值：`default`,`media`	`String`	`default`
title	标题，配置type=media使用	`String`	-
circle	选择图标是否为圆形	`Boolean`	`true`
subtitle	子标题，配合type=media使用	`String`	-
full	是否铺满	`Boolean`	`true`

CheckboxGroup属性

参数	说明	类型	默认值
value	当前选中值列表	`Array`	-
disabled	是否禁用	`Boolean`	-
max	最多可选	`Number`	-

Checkbox事件

事件名称	说明	回调
change	选中状态变化是触发	当前选中状态

CheckboxGroup事件

事件名称	说明	回调
change	选中状态变化是触发	当前选中状态列表

Checkbox 插槽

插槽名	说明
prefix	在选择框之前添加内容
suffix	在选择框后添加内容

← Transition 动画 Radio 单选框 →