场景说明:
这是效果图 , 我们想要实现前面方块选中的状态 但是一般我们只能是这样的
当我们使用element多选框简单的现实这样的粗略的效果的时候 可以看到这个是蓝色是完全占据整个背景的 ,同时还多了这个√。
初步代码:
<div class="box1">
<div v-for="it in 4" class="flex flex-row">
<el-checkbox :value="it % 2 != 0" :checked="it % 2 != 0" label="是" size="large" />
<el-checkbox :value="it % 2 == 0" :checked="it % 2 == 0" label="否" size="large" />
</div>
</div>
首先解决第一个问题:颜色全部占据整个背景
当我们将基础的样式修改好之后 我们只需要在在选中的的class属性中 添加:
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #f55454;
border-color: #fff;
width: 25px;
height: 25px;
padding: 4px;
background-clip: content-box;
}
这几行代码,占据背景色的大小,内边距,以及切割背景的属性 background-clip: content-box;
就可以实现了。
第二个问题:去除对号问题
.el-checkbox__input.is-checked .el-checkbox__inner::after {
display: none;
}
就这样。两个问题就都解决了。
还有另一种方法:
通过div盒子来实现:
这就简单的实现了 。
说个题外话:各位前端的伙伴们,现在前端找工作难不难呀。想换工作,但是感觉会的远远不够,又怕找不到,找到了又没有现在这个工作合适。有经验的伙伴可以分享一下啊