# cCheckboxGroup多选组组件
cCheckboxGroup
组件依赖 cCheckbox 构建。
# 使用教程
# 使用文档
# 导入
main.js中:
import { cCheckboxGroup } from 'cpm-ui'
Vue.use(cCheckboxGroup)
1
2
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
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>
1
注:cCheckboxGroup
内部使用 cCheckbox
进行构建。对于 cCheckbox 组件来说,本身状态的切换并不依赖于 onChange
事件的触发,而是依赖 v-model
双向绑定来视图的渲染。对于 cCheckboxGroup
组件,我将 v-model
双向绑定应用于group组上,cCheckbox
的切换依赖于 onChange
的触发,同时也派发了一个 onChange
事件,用于处理一些额外的事情,如打点等。
# 插槽slot
无
# 特别提示
- 考虑是移动端组件,几乎不存在使用form表单提交的情况。组件会按照form表单的思想来构建属性,但不会使用form提交。
- 考虑到页面设计的复杂可能性,组件本身只实现了功能,未配置相关style属性,推荐使用手写样式实现UI效果。
← cCheckbox复选框 cRange滑块 →