c-checkbox-group

复选框列表

属性

属性名类型必填默认值说明
optionArray是[]选项数组
horizontalBoolean否false单选框排列方向，默认纵向排列
positionString否left按钮相对于文案的位置，可选值包括：left、right
c-bind:groupchangeEventHandle否点击按钮出发 返回事件对象： event.detail 返回值： event.detail.value - 修改后的选项数组 event.detail.index - 修改的复选框索引 event.detail.selected - 选中的项目文案数组

示例

  1. <template>
  2.   <c-checkbox-group
  3.     option="{{ checkboxGroupOption }}"
  4.     c-bind:groupchange="groupChangeHandler"
  5.     >
  6.   </c-checkbox-group>
  7. </template>
  8. <script>
  9. class CCheckbox {
  10.   data = {
  11.     checkboxGroupOption: [{
  12.       checked: true,
  13.       label: 'one',
  14.       disabled: true
  15.     }, {
  16.       checked: false,
  17.       label: 'two'
  18.     }, {
  19.       checked: false,
  20.       label: 'three'
  21.     }],
  22.     selected: 'one',
  23.   }
  25.   methods = {
  26.     groupChangeHandler (e) {
  27.       this.checkboxGroupOption = e.detail.value
  28.       this.selected = e.detail.selected.join(', ')
  29.     }
  30.   }
  31. }
  32. export default new CCheckbox();
  33. </script>
  34. <script cml-type="json">
  35. {
  36.   "base": {
  37.       "usingComponents": {
  38.           "c-checkbox-group": "cml-ui/components/c-checkbox-group/c-checkbox-group"
  39.       }
  40.   }
  41. }
  42. </script>

c-checkbox-group - 图1wx

c-checkbox-group - 图2web

c-checkbox-group - 图3native

查看完整示例