vue3+ts+pinia实现tabs动态标签页

好的，让我来解答你的问题。

首先，你需要安装 Vue3、TypeScript 和 Pinia。可以使用以下命令来安装：

npm install vue@next typescript@latest @pinia/core@next @pinia/vee-validate@next

接下来，你需要创建一个 `Tabs` 组件，用于显示标签页。该组件可以接收一个 `tabs` 属性，用于动态设置标签页。

<template>
  <div>
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="switchTab(index)">
        {{ tab.label }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Tab } from '@/types'

export default defineComponent({
  name: 'Tabs',
  props: {
    tabs: {
      type: Array as () => Tab[],
      required: true
    }
  },
  setup(props) {
    const activeTab = ref(0)

    const switchTab = (index: number) => {
      activeTab.value = index
    }

    return {
      activeTab,
      switchTab
    }
  }
})
</script>

<style scoped>
.tabs {
  display: flex;
  justify-content: space-between;
  background-color: #f1f1f1;
  padding: 10px 15px;
  border-bottom: 1px solid #ccc;
}

.tabs > * {
  cursor: pointer;
  padding: 10px;
  border-radius: 5px 5px 0 0;
}

.tabs > .active {
  background-color: #fff;
  border-bottom: none;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
}
</style>

接下来，你需要在父组件中动态设置标签页，并使用 `Tabs` 组件来显示它们。

<template>
  <div>
    <button @click="addTab">添加标签页</button>
    <Tabs :tabs="tabs">
      <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </Tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Tab } from '@/types'
import Tabs from '@/components/Tabs.vue'

export default defineComponent({
  name: 'DynamicTabs',
  components: {
    Tabs
  },
  setup() {
    const tabs = ref<Tab[]>([
      { label: '标签页1', content: '标签页1内容' },
      { label: '标签页2', content: '标签页2内容' },
      { label: '标签页3', content: '标签页3内容' }
    ])

    const activeTab = ref(0)

    const addTab = () => {
      const newTab = {
        label: `标签页${tabs.value.length + 1}`,
        content: `标签页${tabs.value.length + 1}内容`
      }

      tabs.value.push(newTab)
      activeTab.value = tabs.value.length - 1
    }

    return {
      tabs,
      activeTab,
      addTab
    }
  }
})
</script>

最后，你需要定义 `Tab` 类型。

export interface Tab {
  label: string
  content: string
}

以上就是使用 Vue3、TypeScript 和 Pinia 实现动态标签页的方法。希望对你有所帮助！