封装Vue组件?怎么不用Element组件呢！站在巨人的肩膀上不香么？重复造轮子，只有傻瓜才去做。

组件有现成的不用，这是什么呢？Layui是什么，怎么没听过？新的技术出现，意味着不成熟。一个企业追求是“稳”，新技术的使用往往会滞后，公司整套生态系统基于Layui。

地基已打下，总不能推倒重来，想「偷懒」引入Element组件成了不可能的事。Layui早已跟上不时代的潮流，技术的迭代上：看上了Vue的实时刷新数据，又不想抛弃Layui样式。没有现成的代码下，唯有手动重写封装组件。

对于封装组件之事，其实属于将过程完全黑盒化，只需要录入数据，产出结果即可。组件封装后，随时随地的引入组件，大大降低代码重复率，提成代码的质量，以封装复选框组件为例：

复选框组件：

JSVue.component('checkbox-item', {
    model: { prop: 'check', event: 'click' },
    props: ['item','check'],
    template: '<div v-on:click="selectedHandler(check,item.value)" class="layui-unselect layui-form-checkbox" v-if="getStatus(check,item.value)"><span>{{item.name}}</span><i class="layui-icon layui-icon-ok"></i></div>'+
    '<div v-on:click="selectedHandler(check,item.value)" class="layui-unselect layui-form-checkbox layui-form-checked" v-else="getStatus(check,item.value)"><span>{{item.name}}</span><i class="layui-icon layui-icon-ok"></i></div>',
    methods: {
        selectedHandler: function (check,value) {
            var result = '';
            if(!this.isHas(check,value)) {
                result = check+','+value;
                result = this.ltrim(result,',');
            } else {
                result = this.removeItem(check,value)
            }

            this.$emit('click', result);
        },
        getStatus: function (check,value) {
            return !this.isHas(check,value);
        },
        isHas: function (check,value) {
            if(this.isEmptyValue(check)) {
                return 0;
            }

            check = this.ltrim(check,',');

            var arr = check.split(',');
            for(var i in arr) {
                if(arr[i] == value) {
                    return 1;
                }
            }

            return 0;
        },
        isEmptyValue: function (value) {
            if(value != '' && value != undefined && value != null) {
                return false;
            }

            return true;
        },
        ltrim:  function(str,type) {
            var regular = '';
            switch (type) {
                case ',':
                    regular = /(^,*)/g;
                    break;
                default:
                    regular = /(^s*)/g;
                    break;
            }

            return str.replace(regular,"");
        },
        removeItem: function (check,value) {
            var index = 0;
            var arr = check.split(',');
            for(var i in arr) {
                if(arr[i] == value) {
                    index = i;
                }
            }

            arr.splice(index,1);
            return arr.join(',');
        }
    }
})

复选框组件继续沿用Layui样式，选中的结果集以逗号分隔，如：’写作,阅读‘。用户的选择操作，直接修改model 数据，实现即时交换数据。

Vue代码：

JSnew Vue({
    el: '#app',
    data: {
        data: [
            { name: '写作',value: '写作'},
            { name: '阅读',value: '阅读'},
            { name: '发呆',value: '发呆'}
        ],
        check: '',
    }
})

宣染复选框时，Vue需要提供宣染的数据：name 指用户能看到的数据，value 指代码实际记录的数据。设置默认值，check:’写作,阅读'，即可。

HTML代码：

HTML<div id="app">
    <div>未选结果：{{check}}</div>
    <checkbox-item v-model="check" v-for="item in data" v-bind:check="check" v-bind:item="item"></checkbox-item>
</div>

※ 基于Layui样式，需要引入Layui样式包

参考资料：