Vue+Ts自定义封装Tabs切换与状态查询功能

以下是我们的实现效果：

有状态的名字和可以选择的状态类型，来看看我们封装这个组件的代码

<template>
  <div class="tabBox">
    <span>{{ props.tabname }}：</span>
    <div
      :class="tabindex === item.id ? 'colorred' : 'colorthree'"
      v-for="(item, index) in props.tablist"
      :key="index"
      @click="cligetdata(item.id)">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, watch } from "vue";
const emit = defineEmits(["tabsemit"]);
const props = defineProps({
  tablist: {
    type: Array,
    default: []
  },
  tabname: {
    type: String,
    default: "状态"
  }
});
const tabindex = ref(null) as any;

const cligetdata = (val: number) => {
  tabindex.value = val;
  emit("tabsemit", val);
};
</script>

来看看我们在组件内怎么引入实用这个组件：

//给组件传入显示的数组和接收我们点击获取对应状态值方法 
<tabs :tablist="tablist" @tabsemit="getTable" :tabname="'状态'" />

import tabs from "@/components/tabs/index.vue";

使用的组件的<template>代码和引入，大家可以自己定义这个组件的name。

//传入的数组，有状态的名字和后端协调好传入的值
const tablist = ref([
  { name: "全部", id: [-1] },
  { name: "状态1", id: [1] },
  { name: "状态2", id: [2] },
  { name: "状态3", id: [3] },
  { name: "状态4", id: [4] }
]);

再通过方法获取点击的值根据自己的需求请求数据就可以啦！一个简单的tab组件就好了，使用中有个别细节就需要自己补充哦！