# cCheckboxGroup多选组组件

cCheckboxGroup 组件依赖 cCheckbox 构建。

# 使用教程

点击查看教程

# 使用文档

# 导入

main.js中:

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

# 调用

<cCheckboxGroup :options="config.options" v-model="config.activeValue"></cCheckboxGroup>
1
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双向绑定 BooleanStringNumber false
options 可选数据,list map结构 Array checkboxcheckboxGroup checkbox

options结构,基本同 cCheckbox 组件

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

# 事件Event

方法 说明
onChange 点击选中

如:

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

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

# 插槽slot

# 特别提示

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

注:因PC端浏览存在最小12px字号的原因,部分视图下文字会显示比较大,手机端访问正常。