# cCheckboxGroup多选组组件

cCheckboxGroup 组件依赖 cCheckbox 构建。

# 使用教程

# 使用文档

# 导入

main.js中：

import { cCheckboxGroup } from 'cpm-ui'
Vue.use(cCheckboxGroup)

1
2

# 调用

<cCheckboxGroup :options="config.options" v-model="config.activeValue"></cCheckboxGroup>

config: {
  options: [
    {
      label: '苹果',
      value: 'apple',
      disabled: false
    },
    {
      label: '香蕉',
      value: 'banana',
      disabled: false
    },
    {
      label: '西瓜',
      value: 'watermelon',
      disabled: false
    },
    {
      label: '橘子',
      value: 'orange',
      disabled: true
    }
  ],
  activeValue: ['banana']
}

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

# 属性props

参数	说明	类型	可选值	默认值
value	当前值，v-model双向绑定	`Boolean`、`String`、`Number`		false
options	可选数据，list map结构	Array	`checkbox`、`checkboxGroup`	`checkbox`

options结构，基本同 cCheckbox 组件

参数	说明	类型	可选值	默认值
label	提示文字	String		''
value	checkbox值	String、Number、Boolean
disabled	是否禁止操作	Boolean	`true`、`false`	false
hidden	是否隐藏	Boolean	`true`、`false`	false
checkboxColor	checkbox颜色，可传一个字符串表示正常颜色，也可传数组['正常颜色', '不可选置灰色']	String、Array		['#4574ff', '#C8C7CC']

# 事件Event

方法	说明
onChange	点击选中

如：

<cCheckboxGroup :options="config.options" v-model="config.activeValue" @onChange="onChange"></cCheckboxGroup>

注：cCheckboxGroup 内部使用 cCheckbox 进行构建。对于 cCheckbox 组件来说，本身状态的切换并不依赖于 onChange 事件的触发，而是依赖 v-model 双向绑定来视图的渲染。对于 cCheckboxGroup 组件，我将 v-model 双向绑定应用于group组上，cCheckbox 的切换依赖于 onChange 的触发，同时也派发了一个 onChange 事件，用于处理一些额外的事情，如打点等。

# 插槽slot

无

# 特别提示

考虑是移动端组件，几乎不存在使用form表单提交的情况。组件会按照form表单的思想来构建属性，但不会使用form提交。
考虑到页面设计的复杂可能性，组件本身只实现了功能，未配置相关style属性，推荐使用手写样式实现UI效果。

← cCheckbox复选框 cRange滑块 →