使用vue封装tab组件

组件代码

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

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      activeTab: 0,
    };
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index;
    },
  },
};
</script>

<style>
.tab-nav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab-nav li {
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab-nav li.active {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.tab-content {
  border: 1px solid #ddd;
  padding: 20px;
  border-top: none;
}
</style>

这个组件使用了一个 tabs 属性来传递选项卡的配置信息，每个选项卡都有一个 title 属性来设置选项卡标题，还可以添加其他需要的属性，如 name 等。在模板中，我们使用了 v-for 指令来渲染选项卡的标签，使用 activeTab 变量来表示当前激活的选项卡。点击选项卡时，我们使用 setActiveTab 方法来更新 activeTab 的值，然后在模板中使用 slot 指令来渲染对应的选项卡内容。最后，我们使用 CSS 样式来设置选项卡和内容的样式。

使用示例：

<template>
  <div>
    <Tab :tabs="tabs" v-model="activeTab">
      <template v-for="(tab, index) in tabs">
        <TabPane :key="index" :name="tab.name">
          <p>{{ tab.content }}</p>
        </TabPane>
      </template>
    </Tab>
  </div>
</template>

<script>
import { Tab, TabPane } from '@/components'

export default {
  name: 'TabDemo',
  components: {
    Tab,
    TabPane,
  },
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        {
          name: 'tab1',
          label: 'Tab 1',
          content: 'This is tab 1 content',
        },
        {
          name: 'tab2',
          label: 'Tab 2',
          content: 'This is tab 2 content',
        },
        {
          name: 'tab3',
          label: 'Tab 3',
          content: 'This is tab 3 content',
        },
      ],
    }
  },
}
</script>

来源：chatgpt3.5