思路:
1. 高亮的色块是独立的一个盒子,需要插入当前激活的内容用来撑开色块盒子的宽度,这样色块的宽度就会和当前激活的内容宽度一致,色块的字体颜色设置透明即可
2. 色块滑动的距离是读当前激活元素的offsetLeft,赋值给色块盒子的translateX 属性
3. 使用vue3的新属性,在css中使用v-bind()动态的设置可变化的属性
4. 在色块盒子加上过渡的属性transition,即可实现色块的滑动过度效果
// 新建CSlideSwitch.vue组件
{{ showSliderName }}
{{ item[propsAttr.label] }}
在文件中使用滑动切换组件
滑动切换组件
绑定的值:{{ slideValue }}