本文介绍如何使用原生JavaScript结合Vue封装一个高效的Tab切换组件。通过CSS3弹性盒子（Flexbox）实现子元素平分宽度，利用父元素伪元素配合transform属性实现平滑的水平滑动切换效果。文章详细解析了实现原理、关键代码逻辑及适配注意事项，提供可直接复用的Vue组件示例。
本文分享了一段利用原生JavaScript封装的Vue Tab切换组件的具体实现代码，供读者参考学习。
首先展示最终的运行效果。
本方案所依赖的核心技术栈。
主要涉及Vue框架、原生JavaScript以及CSS3样式技术。
该封装好的Vue组件可以直接集成到项目中使用。
<template>
<div class="bookcircle-header">
<ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
<li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
书友
</li>
<li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
书单
</li>
</ul>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
headerActive: 0,
};
},
computed: {},
created() {},
mounted() {
//初始化抛发
this.$emit("change", this.headerActive);
},
methods: {
headerChange(index) {
this.headerActive = index;
this.$emit("change", index);
},
},
};
</script>
<style lang="less" scoped>
.bookcircle-header {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
.wrapper {
width: 286px;
font-size: 14px;
height: 29px;
color: #1489fe;
border: 1px solid #1489fe;
border-radius: 14px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box; // 解决边框溢出，将border包含在盒子内部
li {
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.active {
color: white;
}
&::before {
content: "";
width: 143px;
height: 100%;
background-color: #1489fe;
position: absolute;
top: 0px;
left: 0px;
border-radius: 13px 0px 0px 13px;
z-index: 1;
transition: all 0.3s;
}
&.firend::before {
transform: translateX(0);
border-radius: 13px 0px 0px 13px;
}
&.booklist::before {
transform: translateX(100%);
border-radius: 0px 13px 13px 0px;
}
}
}
</style>核心实现逻辑如下：
结构上采用ul和li标签，并结合弹性盒子（Flexbox）布局。首先设定父容器的宽高，利用弹性布局使子元素li沿水平方向展开。通过为子元素设置flex: 1属性，确保每个子元素均分父容器的宽度。
接着，在父元素上定义伪元素，采用绝对定位方式覆盖在第一个li元素之上。利用z-index属性调整伪元素与子元素之间的层级关系，确保视觉显示的准确性。
最后，为伪元素添加transition过渡属性，并结合transform: translateX()进行水平位移操作，从而实现Tab切换时的平滑动画效果。
开发过程中需注意以下关键点：
1. 尽管点击事件绑定在子元素上，且子元素拥有active样式类，但Tab切换的视觉动画并非由子元素自身状态驱动，而是通过父元素的伪元素状态变化来实现。 2. 必须根据子元素的索引值（index）动态切换父元素的class（如headerActive），只有父元素class改变，其伪元素才能根据当前选中的子元素执行对应的切换动画。 3. 本组件集成了淘宝amfe-flexible库及postcss进行屏幕适配，在实际使用时需确保项目已配置相应的适配方案。
以上内容为本文的全部分享，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站获取更多技术资源。