vue tabs

<template>
  <div class="tabs">
    <div class="tab-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: currentIndex === index }]"
        @click="changeTab(index)"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot :name="'tab-' + currentIndex"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ]
    };
  },
  methods: {
    changeTab(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style scoped>
.tabs {
  width: 100%;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tab-item.active {
  border-bottom-color: blue;
}

.tab-content {
  padding: 10px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • div.tabs: 包含整个 Tabs 组件。
   • div.tab-header: 包含所有标签页的标题。
   • v-for: 循环渲染每个标签页的标题，点击时调用 changeTab 方法切换当前激活的标签页。
   • :class 绑定类名：根据 currentIndex 判断是否为当前激活的标签页，添加 active 类。
   • @click: 点击事件，触发 changeTab 方法更新 currentIndex。
   • div.tab-content: 渲染当前激活标签页的内容，使用 <slot> 实现内容插槽。

2. 脚本部分 (<script>):

   • data: 定义了 currentIndex 和 tabs 数据属性。currentIndex 表示当前激活的标签页索引，tabs 是一个包含标签页标题的对象数组。
   • methods: 包含 changeTab 方法，用于更新 currentIndex。

3. 样式部分 (<style scoped>):

   • 定义了 Tabs 组件的基本样式，包括标签页标题的样式和激活状态下的样式。
   • .tab-item.active 样式：当标签页被激活时，底部会有蓝色边框。

通过这种方式，你可以创建一个简单的 Vue Tabs 组件，并且可以根据需要扩展和自定义其功能。