vue实现一个tab栏
实现 Tab 栏的基本结构
在 Vue 中实现 Tab 栏，可以使用 v-for 动态渲染选项卡标题，并通过 v-show 或 v-if 控制内容显示。以下是一个基础模板：
<template>
<div class="tab-container">
<div class="tab-header">
<div
v-for="(tab, index) in tabs"
:key="index"
class="tab-title"
:class="{ 'active': activeTab === index }"
@click="activeTab = index"
>
{{ tab.title }}
</div>
</div>
<div class="tab-content">
<div
v-for="(tab, index) in tabs"
:key="index"
v-show="activeTab === index"
>
{{ tab.content }}
</div>
</div>
</div>
</template>数据与状态管理
在 script 部分定义选项卡数据和控制逻辑：
<script>
export default {
data() {
return {
activeTab: 0, // 默认激活第一个选项卡
tabs: [
{ title: 'Tab 1', content: 'Content for Tab 1' },
{ title: 'Tab 2', content: 'Content for Tab 2' },
{ title: 'Tab 3', content: 'Content for Tab 3' }
]
};
}
};
</script>样式设计
通过 CSS 实现选项卡的视觉交互效果：
<style scoped>
.tab-container {
width: 100%;
}
.tab-header {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-title {
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.tab-title.active {
background-color: #f0f0f0;
border-bottom: 2px solid #42b983;
}
.tab-content {
padding: 20px;
}
</style>动态内容扩展
若需动态添加或删除选项卡，可通过方法操作 tabs 数组：
methods: {
addTab() {
this.tabs.push({
title: `Tab ${this.tabs.length + 1}`,
content: `New content ${this.tabs.length + 1}`
});
},
removeTab(index) {
this.tabs.splice(index, 1);
if (this.activeTab >= this.tabs.length) {
this.activeTab = this.tabs.length - 1;
}
}
}使用组件化拆分
对于复杂场景，可将单个选项卡封装为子组件：
<template>
<tab-item
v-for="(tab, index) in tabs"
:key="index"
:tab="tab"
:is-active="activeTab === index"
@click.native="activeTab = index"
/>
</template>
<script>
import TabItem from './TabItem.vue';
export default {
components: { TabItem }
};
</script>响应式优化
添加响应式断点适应不同屏幕尺寸：
@media (max-width: 600px) {
.tab-header {
flex-direction: column;
}
}动画过渡效果
为内容切换添加平滑过渡：
<transition name="fade" mode="out-in">
<div v-show="activeTab === index">{{ tab.content }}</div>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
