使用vue3封装Switch开关组件 vue3前端switch控件

自己写了一个视频播放器组件，为了减少npm包的体积里面用到的组件都是自己封装的
【使用vue3封装Switch开关组件】工作中switch开关组件组件中都有，但是这个组件自己会封装吗？这篇文章教大家运用简单的html元素实现就能实现一个Vue3版本的switch组件。
先看一下图例开关的状态

文章图片

vue3实现switch开关组件
为什么说我这个组件简单呢？
先上html代码非常简单

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

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

.d-switch { position: relative; height: 18px; transition: background 0.2s; width: v-bind(width); background: rgb(117, 117, 117); border-radius: 10px; display: inline-flex; align-items: center; vertical-align: middle; .d-switch__input { position: relative; z-index: 1; margin: 0; width: 100%; height: 100%; opacity: 0; } .d-switch_action { position: absolute; transition: 0.2s; left: 2px; top: 2px; z-index: 0; height: 14px; width: 14px; background: #fff; border-radius: 50%; } &.is-checked { background: v-bind(activeColor); .d-switch_action { left: 100%; background: #fff; margin-left: -18px; } } }

最后是添加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 =https://www.it610.com/article/== props.trueValue }) //input事件获取当前input事件 const handleInput = () => { nextTick(() => { const val = input.value.checked emits("update:modelValue", val); // 开关点击后的状态传给v-model emits("change", val); //给组件增加change 事件 }) };

使用示例