vue实现页签

Vue 实现页签功能的方法

使用动态组件和 v-for 渲染页签

在 Vue 中，可以通过动态组件和 v-for 指令实现页签功能。创建一个包含页签标题和内容的数组，使用 v-for 循环渲染页签标题，并通过点击事件切换当前激活的页签。

<template>
  <div>
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <component :is="tabs[activeTab].component" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', component: 'Tab1Component' },
        { title: 'Tab 2', component: 'Tab2Component' },
      ],
    };
  },
};
</script>

<style>
.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tabs div {
  padding: 10px 20px;
  cursor: pointer;
}
.tabs div.active {
  border-bottom: 2px solid #42b983;
}
.tab-content {
  padding: 20px;
}
</style>

使用 Vue Router 实现路由页签

如果需要页签与路由绑定，可以通过 Vue Router 实现。结合 router-view 和导航菜单，动态渲染页签内容。

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

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

使用第三方库实现页签

如果需要更复杂的页签功能，可以引入第三方库如 vue-tabs-component 或 element-ui 的 el-tabs 组件。

安装 element-ui：

npm install element-ui

使用 el-tabs：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Content 2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
    };
  },
};
</script>

自定义页签动画效果

通过 Vue 的过渡效果（transition 或 transition-group），可以为页签切换添加动画效果。

<template>
  <div>
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div :key="activeTab" class="tab-content">
        {{ tabs[activeTab].content }}
      </div>
    </transition>
  </div>
</template>

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