做投票网站教程,应用软件有哪些,各种中药材初加工平台,饰品行业网站开发效果图 思路#xff1a; 1. 高亮的色块是独立的一个盒子#xff0c;需要插入当前激活的内容用来撑开色块盒子的宽度#xff0c;这样色块的宽度就会和当前激活的内容宽度一致#xff0c;色块的字体颜色设置透明即可 2. 色块滑动的距离是读当前激活元素的offsetLeft#x…效果图 思路 1. 高亮的色块是独立的一个盒子需要插入当前激活的内容用来撑开色块盒子的宽度这样色块的宽度就会和当前激活的内容宽度一致色块的字体颜色设置透明即可 2. 色块滑动的距离是读当前激活元素的offsetLeft赋值给色块盒子的translateX 属性 3. 使用vue3的新属性在css中使用v-bind()动态的设置可变化的属性 4. 在色块盒子加上过渡的属性transition即可实现色块的滑动过度效果 实现代码 // 新建CSlideSwitch.vue组件 templatediv classc-slide-switchdiv classcontainer!-- silder 是高亮的颜色 --span classslider :class{ is-transition: animation }{{ showSliderName }}/spanspanv-for(item, index) in dataSource:keyindexrefsliderItemRefstylez-index: 66:class{ actived: currentValue item[propsAttr.value] }clickchangeSlide(index, item[propsAttr.value]){{ item[propsAttr.label] }}/span/div/div /template script setup langts /*** 这是 滑动切换组件*/ import { ref, computed, watch } from vue; type Props {modelValue?: any; // 数值dataSource: any[]; // 数据源propsObj?: { [key: string]: any }; // 读取的字段属性animation?: boolean; // 是否开启动画duration?: number; // 动画时长 注意单位为毫秒 }; const props withDefaults(definePropsProps(), {modelValue: null,dataSource: () [],propsObj: () {// 属性return {};},animation: true,duration: 500 }); const emit defineEmits([update:modelValue, change]);const propsAttr computed(() {const obj {label: label,value: value};return Object.assign(obj, props.propsObj); });const sliderItemRef ref(); // slider下的每个item实例 const currentValue ref(props.modelValue); // 记录当前激活的值 const sliderOffsetLeft ref(0); // 记录滑块需要滑动的距离// 用于在slider滑块上展示的文案--这个文案的作用主要是撑开slider滑块的宽度 const showSliderName computed(() {const target props.dataSource.find((item: any) item[propsAttr.value.value] currentValue.value);return target[propsAttr.value.label]; }); // 滑块的动画时常 const sliderDuration computed(() {return (props.duration / 1000) s; })// 监听激活的值的变化发射事件 watch(() currentValue.value,() {emit(update:modelValue, currentValue.value);},{ immediate: true } );// 切换滑块 const changeSlide (index: number, value: any) {const offset 2; // 偏移量// 更改滑块 滑动的距离sliderOffsetLeft.value sliderItemRef.value[index].offsetLeft - offset px;// 记录当前激活的值currentValue.value value;emit(change, value); }; /scriptstyle scoped langscss .container {position: relative;display: inline-flex;align-items: center;padding: 3px;overflow: hidden;background: rgba($color: #000000, $alpha: 10%);border-radius: 20px;span {display: inline-block;padding: 2px 24px;font-size: 12px;color: ##606266;cursor: pointer;}.slider {position: absolute;display: inline-block;transform: translateX(v-bind(sliderOffsetLeft));overflow: hidden;color: transparent;background-color: ##409EFF;border-radius: 20px;}.is-transition {transition: all v-bind(sliderDuration);}.actived {z-index: 99;font-weight: 600;color: #ffffff;border-radius: 20px;} } /style在文件中使用滑动切换组件 templatedivh2滑动切换组件/h2CSlideSwitch v-modelslideValue :data-sourcebtnList /div绑定的值{{ slideValue }}/div/div /templatescript setup langts import { ref } from vue; import CSlideSwitch from /components/modules/CSlideSwitch/index.vue;const btnList [{ label: 今天, value: today },{ label: 昨天, value: yesterday },{ label: 本周, value: this_week },{ label: 上周, value: last_week },{ label: 本月, value: this_month },{ label: 上月, value: last_month } ];const slideValue ref(today); /scriptEND