• 复选框组件 Checkbox-Group
  • 复选框 Checkbox
    • 基础案例
      • 示例代码
    • 单个Checkbox布局方式
    • 多个Checkbox布局方式
      • 示例代码
    • 设置选中项
      • 示例代码
    • 设置选中项的颜色
      • 示例代码
    • 设置禁用
      • 示例代码
    • 自定义checkbox的内容部分
      • 示例代码
    • 复选框组件属性(Checkbox Attributes)
    • 复选框容器组件属性 (Checkbox-Group Attributes)
    • 复选框组件事件 (Checkbox-Group Events)

    复选框组件 Checkbox-Group

    单项选择器,与原生组件Checkbox-Group用法类似,内部由多个l-checkbox组件组成。

    复选框 Checkbox

    单选项目,与原生组件Checkbox用法类似,内部可传入slot。与Checkbox-Group搭配使用。

    基础案例

    单项选择器内部由多个l-checkbox组成,linchange事件能监听到选中项的变化。

    示例代码

    1. <l-checkbox-group current="{{current}}" bind:linchange="onChangeTap" >
    2. <l-checkbox
    3. wx:for-items="{{items}}"
    4. wx:key="{{item.value}}"
    5. value="{{item.value}}"
    6. disabled="{{item.disabled}}">
    7. </l-checkbox>
    8. </l-checkbox-group>
    1. data: {
    2. current: ['中国', '美国'],
    3. items: [
    4. { value: '美国' },
    5. { value: '中国' },
    6. { value: '巴西' },
    7. { value: '日本' },
    8. { value: '英国' },
    9. { value: '法国' },
    10. ]
    11. }

    单个Checkbox布局方式

    根据具体需求,选择最佳的标签对齐方式(选中图标和内容部分)。

    placement 默认值是 left ,即Checkbox的选中图标居左显示。值为 right 时,图标居右显示。

    多个Checkbox布局方式

    根据具体需求,选择最佳的多个Checkbox组件对齐方式,需要设置Checkbox-Group组件的placement属性。

    placement 默认值是 column ,可选项为 row/column

    示例代码

    1. <l-checkbox-group bind:linchange="onChangeTap" >
    2. <l-checkbox placement="right" value="中国" />
    3. <l-checkbox placement="right" value="美国" />
    4. </l-checkbox-group>

    设置选中项

    当我们需要将某一个Checkbox设置为当前选中项时,需要将当前checkboxvalue值添加到 Checkbox-Groupcurrent属性当中,current接收一个数组。

    注意事项

    Checkbox-Groupcurrent属性的类型是数组。

    示例代码

    <l-checkbox-group current="['中国']" bind:linchange="onChangeTap" >
      <l-checkbox  value="中国" />
      <l-checkbox  value="美国" />
    </l-checkbox-group>
    

    设置选中项的颜色

    当我们需要改变checkbox选中时的颜色时,可以通过color 属性来设置

    示例代码

    <l-checkbox value="中国"  color="red" />
    

    设置禁用

    当我们需要将某一个选项禁用时,设置 disabledtrue 即可。

    示例代码

    <l-checkbox value="中国"   disabled="{{true}}" />
    

    自定义checkbox的内容部分

    通过 <slot> 的方式可以自定义Checkbox组件的右边部分,在此之前需要将custom设置为true

    示例代码

    <l-checkbox value="中国" custom="{{true}}"  disabled="{{true}}" >
      <view>
        <image src="path/to/img.png" class="img"/>
        <text>中国</text>
      </view>
    </l-checkbox>
    

    注意事项

    插入slot的时候,也需要设置value,这个value不会显示,但是会在你更改选中项的时候,用过linchange事件返回。用来通知开发者当前选中的是什么。

    复选框组件属性(Checkbox Attributes)

    参数说明类型可选值默认值
    value当前项的 valueString
    sizecheckbox的大小String/Number36
    shapecheckbox的形状Stringright/circle36
    colorcheckbox被选中时的颜色String#38g9db
    detail自定义任何内容,可以通过事件linchange获取到Object{}
    checked当前项是否选中,与Checkbox-Group 连用时失效。请查看Checkbox-Group的current属性介绍Booleantrue/falsefalse
    disabled设置是否禁用Booleantrue/falsefalse
    placement设置checkbox图标的位置Stringleft/rightleft
    custom设置是否传入slotBooleantrue/falsefalse
    l-class设置checkbox的外部样式类String
    l-title-class设置checkbox文字部分的外部样式类String
    tip-type校验错误提醒方式Stringtoast/message/text-
    l-error-texttipType 为 text 时,错误提示信息外部样式类String

    复选框容器组件属性 (Checkbox-Group Attributes)

    参数说明类型可选值默认值
    current接受一个数组,如果checkbox组件的value值能在数组中找到与它相等的,那么该checkbox会标记选中Array
    placement更改checkbox的flex布局Stringrow/columncolumn

    复选框组件事件 (Checkbox-Group Events)

    事件名称说明返回值备注
    bind:linchange点击时触发选中项发生变化时触发 linchange 事件,event.detail = {value: 选中项Checkbox的value, detail: checkbox组件detail属性传递的内容(你可以传递这个选项的value和id等等),all: 所有选中的CheckBox的detail属性集合}-