清新UI组件库——checkboxt组件开发思路

    技术2022-07-10  137

    清新组件库:http://ifresh-ui.yating.online/

    源码地址:https://github.com/Chenyating/iFresh-ui

    checkbox组件遇到的问题

    跟radio性质差不多。

    当为checkbox组的时候,值的类型为array;

    判断当单个值的时候。 先判断value是否存在,再判断是否为boolean,选中取反。值为label;

    修改样式

    checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式.

    当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

    <input type="checkbox" :id="id"/> <label :for="id">{{label}}</label>

    原来input[type=checkbox] 要隐藏掉; 对label做样式修改;

    input[type=checkbox] { display: none; } label { cursor: pointer; } label:before { content: ''; display: inline-block; vertical-align: middle; width: 30px; height: 20px; background: @white; line-height: 20px; cursor: pointer; /*改变复选框的边框颜色也可以不要边框*/ border: solid 2px @c-light-primary; border-top: 0; border-bottom: 0; border-radius: 20px; } input:checked+label:before { /*before为伪元素可以在元素之后添加内容*/ display: inline-block; /* css3中的content字符编码*/ content: "\2618"; /* 复选框里面的√居中*/ text-align: center; /* 复选框里面的√大小*/ font-size: 20px; /* 字体的颜色*/ color: @c-primary; /* 复选框勾选后的背景颜色*/ }

    全选和反选(待解决)

    这个要怎么解决?

    在checkbox-group里在checkbox-group外面
    Processed: 0.010, SQL: 9