css3|vue封装checkBox列表组件（实现group和自定义选项，纯css实现效果） vue组件|component|vue

点击我查看效果
一、前言【又在重复造轮子！！！】vue有很多现成的UI框架，博主的手机端用的是mintUI，但是mintUI样式不能整改为想要的样子，因此纯手工封装了一个checkBox组件（纯css实现效果，需要不一样的可自制样式）
先来一个效果图：

文章图片

二、正文 1、说明

使用checkBox绑定数据，选中的数据使用数组存储（vue分组的写法）
为了保证是数组类型，需要指定组件参数使用的变量，使用$emit回传数据到父组件，checkbox实现v-model双向绑定
通过参数确定，是否显示多选框，用样式控制

2、实例调用

// js数据 data: function () { return { multiCheckOptions: [ {'value': '1', 'name': '选项1'}, {'value': '2','name': '选项2(禁用)','disabled': true}, {'value': '3', 'name': '选项3'}], checkedVal1: [1], checkedVal2: [1, 2], checkedVal3: [1, 2], } }

3、代码解析
3.1、参数说明（参数命名最好不要使用大写，有可能会解析不到）：

label：组件的标签名称
options：需要生成的checkBox选项数据格式：[{value:'1',name:'选项1',disabled:false}]
checked：选中的数据 ['1']，通常与disabled:true合并使用，若使用v-model，则无需绑定该参数‘’
disabled：是否全部禁用，默认false可用
showbox：是否显示勾选框，默认显示 ( false:不显示，则样式会改变)

3.2、核心代码：

修改v-model对应的变量和事件，保证数据格式?????，

model: { // v-model对应的变量和事件，默认是value和change prop: 'checked', event: 'change' },

保证单向数据流的统一性，且回传数据到父组件所使用的v-model

tips：可能会有小伙伴觉得，我不用checkedVal:this.checked都可以，只需要直接在checkBox

checkedVal: this.checked, // data中定义一个新的变量，用来存储选中的数据，保证单向数据流的统一性this.$emit('change', newValue) // 监听数据变化，回传数据到父组件

有这三句话，组件就已经成功了一半，接下来只需要把他们放到合适的位置，就可以初见成效。
3.3 、准备js代码

export default { name: "multi-check-list", model: { // v-model对应的变量和事件，默认是value和change prop: 'checked', event: 'change' }, props: { // 组件参数 label: String, options: Array, checked: Array, disabled: false, showbox: { type: Boolean, default: true }, }, watch: { // 监听数据变化，回传数据到父组件 checkedVal(newValue, oldValue) { if (newValue != oldValue) { this.$emit('change', newValue) } } }, data() { return { checkedVal: this.checked, // 用来存储选中的数据 curTime: new Date().getTime(), // 获取当前时间，生成唯一id，保证一个页面可使用多个组件 } }, }

可能会有小伙伴不明白，为什么要checkedVal:this.checked？！？
答：

确实不需要这句话，直接把checkedVal使用到的地方替换成checked也可以达到目的
但是我们写代码，是不是除了写代码之外，还可以做点别的事情，比如写出优雅的代码（(????д????)????? What are you 弄啥嘞！)
首先，vue是单向数据流，自上而下，普通的数据类型，是不会与父组件数据保持一致，因为object（我们用的checked数组，也属于object）用的是同一块内存，也就是上下的checked会同步变化
其次，我们封装组件为了保证调用者的数据不被破坏，我们应该遵循vue的规则，另外定义一个变量用来存储会变化的数据