vue3基础组件开发-Checkbox（多选框组件）

前言

使用了vue3有很长一段时间了，写了很多的基础组件在自己使用，整理一下（尽量使用最简单的方式实现），当做对自己知识的梳理。

tips: 可能是最简单的checkBox组件

技术栈

vue3 + tailwindcss + ts + vite

页面开发

<label> 
    <input type="checkbox" checked> 这是一个多选框
</label>

进一步优化

多选框组件，最重要的就是改变多选框的颜色，以前要用一些特殊的方法，现在只需一行代码搞定

<label> 
    <input type="checkbox" checked class="accent-pink-500"> 这是一个多选框
</label>

原理如下：

accent-color ，一个css新的属性（嗯，可能也不是很新，出来蛮久了）

兼容如下：

如果是做electron开发，且不需要兼容windows7，可以大胆用了

降级处理方案

so，如果说，老版本的浏览器，不兼容怎么办么。

不用担心，还有另外的方案，代码如下：

<div
  class="h-4 w-4 rounded border relative"
  :class="{ 'border-[#FF9B27]': checkCreateCommunity }"
>
  <input
    v-model="checkCreateCommunity"
    type="checkbox"
    class="w-full h-full appearance-none absolute top-0 left-0 checked:before:scale-[0.8] checked:bg-[#FF9B27] checked:before:content-['\e6b8'] checked:before:text-white checked:before:font-['iconfont'] checked:before:absolute checked:before:-top-[5px] checked:before:-left-[1px] cursor-pointer"
  />
</div>

降级方案原理解析

• 1、两层dom元素，外层的div控制多选框大小、圆角、边框等，里面的input实现对勾。
• 2、v-model指令将checkCreateCommunity与复选框的值进行双向绑定，同步更新外层div的边框选中颜色
• 3、appearance-none 移除浏览器默认的复选框样式
• 4、absolute、top-0和left-0用于将复选框相对于父容器进行绝对定位
• 5、checked:before:scale-[0.8]用于将伪元素缩放为原始尺寸的0.8倍
• 6、checked:bg-[#FF9B27]用于设置选中状态下的背景颜色
• 7、checked:before:content-['\e6b8']用于设置伪元素的内容为Unicode码\e6b8对应的字符

so，一句话原理就是：这个多选框组件根据checkCreateCommunity属性的值，可以控制复选框的选中状态和外观样式。选中状态下，复选框会显示特定的边框颜色、缩小的图标、橙色背景和白色文字。未选中状态下，复选框没有特殊的样式

尾声

妈妈再也不用担心不会写Checkbox了，水平有限，如有错漏之处，欢迎大佬指正