c-checkbox-group


复选框列表

属性

属性名 类型 必填 默认值 说明
option Array [] 选项数组
horizontal Boolean false 单选框排列方向,默认纵向排列
position String left 按钮相对于文案的位置,可选值包括:left、right
checkedIcon String - 选中时图标
uncheckIcon String - 未选中时图标
cstyle String - 自定义样式
itemStyle String - checkbox自定义样式
c-bind:groupchange EventHandle 点击按钮出发
返回事件对象:
event.detail
返回值:
event.detail.value - 修改后的选项数组
event.detail.index - 修改的复选框索引
event.detail.selected - 选中的项目文案数组

示例

<template>
  <c-checkbox-group
    option="{{ checkboxGroupOption }}"
    c-bind:groupchange="groupChangeHandler"
    >
  </c-checkbox-group>
</template>
<script>
class CCheckbox {
  data = {
    checkboxGroupOption: [{
      checked: true,
      label: 'one',
      disabled: true
    }, {
      checked: false,
      label: 'two'
    }, {
      checked: false,
      label: 'three'
    }],
    selected: 'one',
  }

  methods = {
    groupChangeHandler (e) {
      this.checkboxGroupOption = e.detail.value
      this.selected = e.detail.selected.join(', ')
    }
  }
}
export default new CCheckbox();
</script>
<script cml-type="json">
{
  "base": {
      "usingComponents": {
          "c-checkbox-group": "cml-ui/components/c-checkbox-group/c-checkbox-group"
      }
  }
}
</script>
wx
web
native

查看完整示例

results matching ""

    No results matching ""