# Checkbox 单/复选框

单选/复选框组件。Checkbox单独使用时,通常作为单选功能使用。CheckboxGroup需与Checkbox一同使用。支持单选/多选,因此它具备Radio组件的功能。 请绝对避免单独使用该组件。它将不附带任何基础样式,仅作为Checkbox组件的联动工具使用。

# 引入说明

TIP

import Checkbox from "jimoui/components/Checkbox/V1/Checkbox";
import CheckboxGroup from "jimoui/components/CheckboxGroup/V1/CheckboxGroup";
1
2

# Checkbox代码演示

TIP

# 注意事项:

通常来说,checkbox的label应为数据的唯一标识,你需保证每条数据的label是绝对唯一不会重复的。每当你需要提交数据,或进行任何响应操作时,通过v-model获取的LabelList进行一一匹配,即可获取需要提交的数据结构。

我们不建议将Label作为一个完整数据结构传入,因为这样做在CheckboxGroup中筛选选中数据时,每次都需要进行对象的深层对比,这对于性能来说并无益处——毕竟选中操作是一个较为频繁的点击交互操作。

//单独一个勾选框
<Checkbox
  :canClickContent="true"
  :disable="false"
  :customClass="'testClass'"
  v-model="selected"
  :label="{obj:111}"
  @tapChange="tapCheckbox1"
>
  <p>123</p>
</Checkbox>

//禁止状态
<Checkbox
  :canClickContent="true"
  :disable="true"
  :customClass="'testClass'"
  v-model="selected"
>
</Checkbox>

//自定义颜色
<Checkbox
  :canClickContent="true"
  :disable="false"
  :customClass="'testClass'"
  v-model="selected4"
  :iconColor="'#023894'"
>
</Checkbox>
<script>
export default kayakVue({
    name: "dev",
    el: "container",
    data() {
        return {
              title: "Checkbox 单选/复选框",
              selected: true,
              selected4: true,
        }
    },
})
</script>

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

# CheckboxGroup代码演示

TIP

//组合勾选 横向  多选
<CheckboxGroup v-model="valueList"  max="4" min="0" :direction="'horizontal'">
    <Checkbox
        v-for="(item,index) in [1, 2, 3, 4]"
        :label="item"
        :key="index"
        :customClass="'groupClass'"
    >
        <p>123</p>
    </Checkbox>
</CheckboxGroup>

//组合勾选 纵向  单选
<CheckboxGroup v-model="valueList2"  max="4" min="0" radio>
    <Checkbox
        v-for="(item,index) in [1, {obj:'aaa'}, 3, 4]"
        :label="item"
        :key="index"
        :customClass="'groupClass'"
    >
        <p>123</p>
    </Checkbox>
</CheckboxGroup>
<script>
export default kayakVue({
    name: "dev",
    el: "container",
    data() {
        return {
              title: "Checkbox 单选/复选框",
              valueList: [1,2],
              valueList2: [{obj:'aaa'}]
        }
    },
})
</script>

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

# Checkbox属性

配置 用途 取值 使用描述
v-model 获取选中状态值 Boolean 建议通过v-model来获取当前是否选中。
当与CheckboxGroup一同使用时,请不要注册这个配置,可能导致意料之外的行为,此时你应通过CheckboxGroup来获取选中的项目。
:canClickContent 点击内容区域是否可选中 Boolean 部分场景下,可能你并不希望点击图标右侧的内容时有选中行为,而是有一个点击跳转的行为。
此时可传入该props来禁止内容区域的点击选中,并注册你自己的点击事件回调来处理业务需求。
:disable 是否禁用选择 Boolean 禁止点击选中,同时展示禁用的图标样式。
为兼容业务需求,这里并不会自动处理内容区域的样式。
:customClass 单选框的自定义class String 自定义checkbox的class,用以覆盖样式。
:label 每条选择框的单一标识值 String/Number/Object 单独使用CheckBox组件时,可传入任意数据。
当与CheckboxGroup一同使用时,务必传入该参数,且传入值为循环里数组的子集。
label为区分每条checkbox数据的唯一表示,类似于数据ID。因此你可以将商品SKU,门店ID等字段作为label使用。它将不会显示在界面上。
:iconDirection 图标对齐方向,左对齐或右对齐 String 取值left,right
:iconColor 更改勾选icon的颜色 / 默认为#ff680a
@tapChange checkbox非禁用时点击回调,value/v-model均触发。 Event $event
点击checkbox时,若当前组件disable为false则执行该回调。
返回值{label: 传啥吐啥,selected: true/false}
@tapDisable checkbox禁用时点击回调 Event $event
点击checkbox时,若当前组件disable为true则执行该回调。

# CheckboxGroup属性

配置 用途 取值 是否必填 使用描述
v-model 获取全部选中项的label数组 LabelList LabelList:Array 当前全部选中状态数据的label集合。
建议通过v-model来获取选中label的list。
单选情况下,它仅返回一项,但仍为Array类型。
Radio 开启单选模式,默认不开启,即默认为多选模式 / 声明该属性后,即使v-model传入的Array长度超过1,组件只会默认选中第一项。因此请不要在单选模式下传入长度超过1的v-model值。
单选模式下,点击已选中的checkbo将不会反选,
max 最多可选中数据的数量 Number/String 假若传入5,则选中条目超过或等于5条时将不会再选中任何数据。
此时选择数据时,reachMax回调将被调用。
min 最少需要选中数据的条数 Number/String 假若传入1,则选中条目少于或等于1条时将不会再反选任何数据。
此时选择数据时,reachMin回调将被调用。
direction 列表水平排列/垂直排列 String 默认值为vertical,即垂直方向换行排列。
如果需要水平排列,请传入horizontal值。
但是请注意,尽量不要再horizontal时将Checkbox组件的iconDirection设置为right。(后续兼容)
@reachMax 选择数据时,超过最大数量时执行回调 LabelList 返回当前选中的全部数据的Label集合
@reachMin 反选数据时,少于最小数量时执行回调 LabelList 返回当前选中的全部数据的Label集合。
  • iOS
  • Android
  • Web
  • MP
v1.0.0