vue3选项卡代码

以下是一个简单的 Vue 3 选项卡组件代码示例：

<template>
  <div>
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="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: "Tab 1", content: "This is the content of Tab 1." },
        { title: "Tab 2", content: "This is the content of Tab 2." },
        { title: "Tab 3", content: "This is the content of Tab 3." },
      ],
    };
  },
};
</script>

<style>
.tabs {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #eee;
}

.tab-content {
  padding: 10px;
  border: 1px solid #ccc;
}
.tab-content div {
  margin-top: 10px;
}

.tabs .active {
  background-color: #ccc;
  cursor: default;
}
</style>

你可以在父组件中使用该选项卡组件，并将选项卡的标题和内容传递给子组件。例如：

<template>
  <div>
    <tabs>
      <tab title="Tab 1">
        <p>This is the content of Tab 1.</p>
      </tab>
      <tab title="Tab 2">
        <p>This is the content of Tab 2.</p>
      </tab>
      <tab title="Tab 3">
        <p>This is the content of Tab 3.</p>
      </tab>
    </tabs>
  </div>
</template>

<script>
import Tabs from "./Tabs.vue";
import Tab from "./Tab.vue";

export default {
  components: {
    Tabs,
    Tab,
  },
};
</script>