# cCheckbox多选框组件

# 使用教程

点击查看教程

# 使用文档

# 导入

main.js中:

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

# 调用

<cCheckbox label="已选择" v-model="flag1"></cCheckbox>
<cCheckbox label="未选择" v-model="flag2"></cCheckbox>
<cCheckbox label="已选择且禁用disabled" disabled v-model="flag3"></cCheckbox>
<cCheckbox label="未选择且禁用disabled" disabled v-model="flag4"></cCheckbox>
1
2
3
4
{
  flag1: true,
  flag2: false,
  flag3: true,
  flag4: false
}
1
2
3
4
5
6

# 属性props

参数 说明 类型 可选值 默认值
value 当前值,v-model双向绑定 BooleanStringNumber false
type 使用类型,cCheckbox 组件可单独使用,也可被 cCheckbox 套用 String checkboxcheckboxGroup checkbox
label 提示文字 String ''
disabled 是否禁止操作 Boolean truefalse false
hidden 是否隐藏 Boolean truefalse false
checkboxColor checkbox颜色,可传一个字符串表示正常颜色,也可传数组['正常颜色', '不可选置灰色'] String、Array ['#4574ff', '#C8C7CC']

# 事件Event

方法 说明
onChange 被选中

如:

<cCheckbox label="未选择" v-model="flag" @onChange="onChange"></cCheckbox>
1

注:对于 cCheckbox 组件来说,本身状态的切换并不依赖于 onChange 事件的触发,而是依赖 v-model 双向绑定来视图的渲染。对于 cCheckboxGroup 组件,我将 v-model 双向绑定应用于group组上,cCheckbox 的切换依赖于 onChange 的触发。

# 插槽slot

# 特别提示

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

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