vue实现标签页效果

实现标签页效果的基本思路

Vue中实现标签页效果通常需要结合动态组件或条件渲染，通过切换不同标签展示对应内容。核心逻辑包括管理当前激活的标签、绑定点击事件以及内容切换。

基于v-show的条件渲染方案

创建标签页组件，利用v-show控制内容显示：

<template>
  <div class="tabs">
    <div class="tab-header">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activateTab(index)"
        :class="{ 'active': 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>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '标签1', content: '内容1' },
        { title: '标签2', content: '内容2' },
        { title: '标签3', content: '内容3' }
      ]
    }
  },
  methods: {
    activateTab(index) {
      this.activeTab = index;
    }
  }
}
</script>

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

使用动态组件实现

通过Vue的<component>元素结合is属性实现动态切换：

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

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';

export default {
  components: { Tab1, Tab2, Tab3 },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '标签1', component: 'Tab1' },
        { title: '标签2', component: 'Tab2' },
        { title: '标签3', component: 'Tab3' }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      return this.tabs[this.activeTab].component;
    }
  },
  methods: {
    activateTab(index) {
      this.activeTab = index;
    }
  }
}
</script>

使用Vue Router实现路由标签页

结合Vue Router实现基于路由的标签页：

// router.js
const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 },
  { path: '/tab3', component: Tab3 }
]

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

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '标签1', path: '/tab1' },
        { title: '标签2', path: '/tab2' },
        { title: '标签3', path: '/tab3' }
      ]
    }
  }
}
</script>

第三方组件库实现

使用Element UI等UI库快速实现：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
    <el-tab-pane label="标签2" name="tab2">内容2</el-tab-pane>
    <el-tab-pane label="标签3" name="tab3">内容3</el-tab-pane>
  </el-tabs>
</template>

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

可关闭标签页实现

添加关闭功能需要维护标签数组：

<template>
  <div class="tabs">
    <div class="tab-header">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activateTab(index)"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
        <span @click.stop="closeTab(index)">×</span>
      </div>
    </div>
    <div class="tab-content">
      <div v-show="activeTab === index" v-for="(tab, index) in tabs" :key="index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '标签1', content: '内容1' },
        { title: '标签2', content: '内容2' },
        { title: '标签3', content: '内容3' }
      ]
    }
  },
  methods: {
    activateTab(index) {
      this.activeTab = index;
    },
    closeTab(index) {
      this.tabs.splice(index, 1);
      if (index <= this.activeTab) {
        this.activeTab = Math.max(0, this.activeTab - 1);
      }
    }
  }
}
</script>