vue菜单tab实现

Vue 菜单 Tab 实现方法

使用动态组件切换内容

通过 Vue 的 component 动态组件结合 v-for 渲染菜单项，点击时切换显示内容：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <component :is="currentTabComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase() + '-component'
    }
  },
  components: {
    'home-component': { template: '<div>Home Content</div>' },
    'about-component': { template: '<div>About Content</div>' },
    'contact-component': { template: '<div>Contact Content</div>' }
  }
}
</script>

<style>
.tabs button.active {
  background: #42b983;
  color: white;
}
</style>

结合路由实现

利用 Vue Router 实现带路由的 Tab 菜单：

<template>
  <nav>
    <router-link 
      v-for="(tab, index) in tabs" 
      :key="index"
      :to="tab.path"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>
  </nav>
  <router-view />
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' },
        { name: 'Contact', path: '/contact' }
      ]
    }
  }
}
</script>

使用第三方 UI 库

Element UI 的 Tab 组件示例：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane 
      v-for="(tab, index) in tabs"
      :key="index"
      :label="tab.label"
      :name="tab.name"
    >
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'home',
      tabs: [
        { label: '首页', name: 'home', content: '首页内容' },
        { label: '关于', name: 'about', content: '关于内容' }
      ]
    }
  }
}
</script>

动画过渡效果

为 Tab 切换添加过渡动画：

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs"
      :key="index"
      @click="currentTab = tab.id"
    >
      {{ tab.title }}
    </button>

    <transition name="fade" mode="out-in">
      <div :key="currentTab">
        {{ tabs.find(t => t.id === currentTab).content }}
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

响应式 Tab 菜单

实现超出宽度自动滚动的 Tab 菜单：

<template>
  <div class="tab-container">
    <div class="tab-scroll">
      <div 
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        @click="selectTab(index)"
        :class="{ active: activeIndex === index }"
      >
        {{ tab }}
      </div>
    </div>
  </div>
</template>

<style>
.tab-container {
  overflow-x: auto;
  white-space: nowrap;
}
.tab-item {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.tab-item.active {
  border-bottom: 2px solid #42b983;
}
</style>