Checkbox 单/复选框

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

引入说明

TIP

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

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>

CheckboxGroup代码演示

TIP

//组合勾选  多选
<CheckboxGroup v-model="valueList"  max="4" min="0">
    <Checkbox
        v-for="(item, index) in [{ obj: 111 }, 2, 3, 4]"
        :label="item"
        :key="index"
        :customClass="'groupClass'"
        @tapChange="tapCheckbox3"
    >
        <!-- <p>123</p> -->
    </Checkbox>
</CheckboxGroup>

//组合勾选  单选
<CheckboxGroup v-model="valueList2" radio>
    <Checkbox
        v-for="(item, index) in [
            { obj: '222' },
            { obj: '000' }
        ]"
        :label="item"
        :key="index"
        :customClass="'groupClass'"
        :iconDirection="'right'"
        @tapChange="tapCheckbox4"
    >
        <p style="color:#666666">内容文案</p>
    </Checkbox>
</CheckboxGroup>
<script>
export default kayakVue({
    name: "dev",
    el: "container",
    data() {
        return {
              title: "Checkbox 单选/复选框",
              valueList: [{ obj: 111 }, 2],
              valueList2: [{obj:'000'}]
        }
    },
})
</script>

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的颜色	String	默认为#ff680a
:checkboxRightOffset	当图标对齐方向为右侧时，勾选icon距离右侧的偏移量	String	默认为''.
@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集合。