vue3+ts的tab栏怎么做

在 Vue3 中使用 TypeScript 实现一个 Tab 栏可以分为以下几个步骤：

1.创建 Tab 组件

在 `components` 目录下创建一个 `Tab.vue` 文件，定义一个 Tab 组件。

<template>
  <div class="tab">
    <div v-for="(item, index) in tabs" :key="index" :class="['tab-item', {active: activeIndex === index}]" @click="changeTab(index)">
      {{item}}
    </div>
  </div>
</template>

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

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

    const changeTab = (index: number) => {
      activeIndex.value = index
      emit('change', index)
    }

    return {
      activeIndex,
      changeTab
    }
  }
})
</script>

<style scoped>
.tab {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
}

.tab-item {
  padding: 10px;
  cursor: pointer;
}

.tab-item.active {
  border-bottom: 2px solid #007aff;
  color: #007aff;
}
</style>

在 `Tab.vue` 中定义了一个 `Tab` 组件，该组件有一个 `tabs` 属性，用来接收要显示的 Tab 标签数组。在 `setup` 函数中，定义了一个 `activeIndex` 变量，用来记录当前选中的标签索引。在 `changeTab` 函数中，更新选中的标签索引，并通过 `emit` 方法向父组件发送事件。

2.使用 Tab 组件

在父组件中，引入 `Tab` 组件，传递要显示的标签数组。

<template>
  <div>
    <Tab :tabs="tabs" @change="handleChange"></Tab>
    <div v-show="activeIndex === 0">第一个标签内容</div>
    <div v-show="activeIndex === 1">第二个标签内容</div>
    <div v-show="activeIndex === 2">第三个标签内容</div>
  </div>
</template>

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

export default defineComponent({
  name: 'TabDemo',
  components: {
    Tab
  },
  setup() {
    const tabs = ref(['标签一', '标签二', '标签三'])
    const activeIndex = ref(0)

    const handleChange = (index: number) => {
      activeIndex.value = index
    }

    return {
      tabs,
      activeIndex,
      handleChange
    }
  }
})
</script>

<style scoped>
</style>

在父组件中，使用 `Tab` 组件，并通过 `:tabs` 属性传递要显示的标签数组。在 `setup` 函数中，定义了一个 `activeIndex` 变量，用来记录当前选中的标签索引。在 `handleChange` 函数中，更新选中的标签索引。