vue3+TypeScript封装tabs组件

以下是一个简单的Vue 3和TypeScript结合的Tabs组件示例：

<template>
  <div class="tabs">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab"
      :class="{ 'active': activeIndex === index }"
      @click="selectTab(index)"
    >
      {{ tab }}
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      required: true
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const activeIndex = ref(props.defaultIndex);
 
    const selectTab = (index: number) => {
      activeIndex.value = index;
      emit('update:modelValue', index);
    };
 
    return { activeIndex, selectTab };
  }
});
</script>
 
<style scoped>
.tabs {
  display: flex;
}
 
.tab {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
 
.tab.active {
  background-color: #f0f0f0;
}
</style>

这个Tabs组件接受一个tabs数组作为属性，它是一系列标签页的标题。defaultIndex属性设置了默认激活的标签页索引。组件有一个名为update:modelValue的自定义事件，它在标签页被选中时触发，并发送当前活动的索引。

使用该组件时，可以这样做：

<template>
  <Tabs :tabs="['Home', 'Profile', 'Messages']" @update:modelValue="handleTabChange" />
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import Tabs from './Tabs.vue';
 
export default defineComponent({
  components: {
    Tabs
  },
  setup() {
    const handleTabChange = (index: number) => {
      console.log(`Selected tab index: ${index}`);
    };
 
    return { handleTabChange };
  }
});
</script>

在这个例子中，Tabs组件被用于展示三个标签页，并在用户点击不同的标签页时通过handleTabChange方法处理事件。