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

点击我查看效果

一、前言

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

先来一个效果图：

二、正文

1、说明

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

2、实例调用

<!-- html -->   
 <multi-check-list label="多选测试1" :options="multiCheckOptions" v-model="checkedVal1"></multi-check-list>
<multi-check-list label="多选测试2" :options="multiCheckOptions" v-model="checkedVal2" :showbox="false"></multi-check-list>
<multi-check-list label="多选测试3(全部禁用)" :options="multiCheckOptions" :checked="checkedVal3" :disabled="true"></multi-check-list>


// 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的规则，另外定义一个变量用来存储会变化的数据

3.4 、编写html代码

遍历传入的options，动态生成CheckBox列表

<div class="multi-checklist">
        <label class="multi-checklist-title">{{label}}</label>
        <div :class="showbox? 'multi-checklist-contentc':'multi-checklist-content'">
            <div class="option-item" v-for="(item,index) in options">
                <input type="checkbox" :id="'mchecklist'+index+curTime" :value="item.value" v-model="checkedVal"
                       class="checkbox" :disabled="item.disabled || disabled">
                <label :for="'mchecklist'+index+curTime" class="check-label">{{item.name}}</label>
            </div>
        </div>
    </div>

到这里，组件封装就基本成型了，没有贴出css，如果需要完整代码，可直接在本人github上clone代码，或者在本人资源里面下载

感谢观看，欢迎留言交流！