mky-vent-base/src/views/vent/home/configurable/components/preset/CustomTabs.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
  <div>
    <BaseTab :tabs="tabs" v-model:id="actived" class="mb-5px" />
    <CustomList :list-config="listConfig" :type="type" :style="{ height: 'calc(100% - 45px)', overflow: overflow ? 'auto' : 'none' }" />
  </div>
</template>
<script lang="ts" setup>
  import BaseTab from '/@/views/vent/gas/components/tab/baseTab.vue';
  import CustomList from '../detail/CustomList.vue';
  import { computed, ref } from 'vue';
  import { get } from 'lodash-es';

  const props = withDefaults(
    defineProps<{
      tabConfig: {
        title: string;
        contents: {
          value: string;
          color: string;
          label: string;
          info: string;
        }[];
      }[];
      type: string;
      overflow: boolean;
    }>(),
    {
      listConfig: () => [],
      type: 'A',
    }
  );

  const actived = ref(0);

  const tabs = computed(() => {
    return props.tabConfig.map((e, id) => {
      return { name: e.title, id };
    });
  });

  const listConfig = computed(() => {
    return get(props.tabConfig, actived.value).contents;
  });
  //   defineEmits(['click']);
</script>
<style lang="less" scoped></style>