首页/ 填坑/ 文章详情

Vue结合Layui样式封装复选框组件

Vue 组件 封装 Layui 复选框 发布于 01-16

封装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样式包

参考资料:

组件基础 - Vue.js 
Vue组件|菜鸟教程 
Vue.js 组件 - 自定义事件|菜鸟教程
表单 - 页面元素 - Layui 

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)