使用vue3封装Switch开关组件

自己写了一个视频播放器组件，为了减少npm包的体积里面用到的组件都是自己封装的

工作中switch开关组件组件中都有，但是这个组件自己会封装吗？这篇文章教大家运用简单的html元素实现就能实现一个Vue3版本的switch组件。

先看一下图例 开关的状态

vue3实现switch开关组件

为什么说我这个组件简单呢？
先上html代码 非常简单

这里解释一下逻辑

1.d-switch元素：最外层就是开关的盒子 用来定义背景色和宽高 通过 classis-checked控制开和关的样式
2.d-switch__input元素：仔细看一下这个开关组件里我并没有使用@click事件,是因为click事件都是通过这个input元素实现的。input的值也可以通过true-value和false-value 自定义

3. d-switch_action：这个元素就是开关里的圆色白点。
4. 很重要的一点，因为这个组件是通过点击input获取到当前状态，所以这里要把input的 z-index设置为1，覆盖在span标签上面，然后把opacity设置为0.这样你看到的是 span标签的样式，但是你点击的其实是input触发的事件

最后是添加props属性和事件

import { computed, ref, nextTick } from 'vue'
const props = defineProps({
    modelValue: {  //绑定值，必须等于active-value或inactive-value，默认为Boolean类型  如果是vue2 这里绑定是 `value`
        type: [Number, String, Boolean],
    },
    trueValue: { //switch 打开时的值 可以自定义组件打开的时的值 
        type: [Number, String, Boolean],
        default: true,
    },
    falseValue: { //    switch 关闭时的值  可以自定义组件关闭的时的值 
        type: [Number, String, Boolean],
        default: true,
    },
    activeColor: { //switch 打开时的背景色
        type: [String],
        default: '#409EFF',
    }
})
const emits = defineEmits(['update:modelValue', 'change'])

//获取input元素
const input = ref(null)
//判断当前组件是否是打开状态
const checked = computed(() => {
    //因为可以自定义打开和关闭的值 所以这里必须判断 v-model绑定的值 === 组件自定义打开的值
    return props.modelValue === props.trueValue
})
//input事件 获取当前input事件
const handleInput = () => {
    nextTick(() => {
        const val = input.value.checked
        emits("update:modelValue", val); // 开关点击后的状态传给v-model  
        emits("change", val); //给组件增加change 事件
    })
};

使用示例