vue3封装swicthtab组件 js&&ts可用

在Vue 3中，你可以创建一个可重复使用的SwitchTab组件，该组件可以接收不同的参数来显示不同的标签内容。以下是一个简单的SwitchTab组件的示例代码，它可以在JavaScript和TypeScript中使用。

<template>
  <div class="switch-tab">
    <div
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{'active': activeIndex === index}"
      @click="selectTab(index)"
    >
      {{ tab.title }}
    </div>
  </div>
  <div>
    <slot :name="activeIndex"></slot>
  </div>
</template>
 
<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeIndex: this.initialIndex
    };
  },
  methods: {
    selectTab(index) {
      this.activeIndex = index;
      this.$emit('update:modelValue', index);
    }
  }
};
</script>
 
<style scoped>
.switch-tab div {
  cursor: pointer;
}
.switch-tab div.active {
  font-weight: bold; /* Or any other style to indicate active tab */
}
</style>

使用该组件时，你需要传递一个tabs数组，它包含每个标签的信息，以及一个初始索引（可选）。该组件还提供了一个插槽，用于显示对应标签的内容。

在父组件中使用该组件：

<template>
  <SwitchTab :tabs="tabs" v-model="activeTabIndex">
    <template v-slot:0>
      Content for tab 1
    </template>
    <template v-slot:1>
      Content for tab 2
    </template>
    <template v-slot:2>
      Content for tab 3
    </template>
  </SwitchTab>
</template>
 
<script>
import SwitchTab from './SwitchTab.vue';
 
export default {
  components: {
    SwitchTab
  },
  data() {
    return {
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ],
      activeTabIndex: 0
    };
  }
};
</script>

在这个例子中，SwitchTab组件接收一个tabs数组，并通过v-model进行数据双向绑定，从而允许父组件控制当前激活的标签。每个<template>标签对应一个标签的内容，通过v-slot传递对应的索引来确定内容的显示。