MTP20_H5_PLUS/src/packages/pc/components/modules/auth-component/index.vue

<!-- 动态组件 -->
<template>
    <app-tabs class="app-tabs--primary" :data-list="dataList" v-model:data-index="dataIndex" prop-label="title"
        @change="onTabChange">
        <template #navbar>
            <slot></slot>
        </template>
        <component :is="componentMap.get(componentId)" :code="componentId" v-bind="options" v-if="componentId" />
    </app-tabs>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, onMounted, useAttrs, computed } from 'vue'
import { useAuth } from '@/hooks/auth'
import AppTabs from '@/components/base/tabs/index.vue'

const props = defineProps({
    code: String,
    options: Object,
    // 过滤标签
    tabs: {
        type: Array as PropType<string[]>,
        default: () => ([]),
    },
    // 选中的标签
    selectedTab: {
        type: String,
        default: '',
    },
})

const { componentMap, getAuthComponent } = useAuth(props.code)
const { onChange } = useAttrs()
const dataList = shallowRef<Ermcp.UserMenu[]>([]) // 数据列表
const dataIndex = shallowRef(0) // 选中的标签

const componentId = computed(() => dataList.value[dataIndex.value]?.code)

const onTabChange = (index: number, { code }: Ermcp.UserMenu) => {
    if (onChange instanceof Function) {
        onChange(code)
    } else {
        dataIndex.value = index
    }
}

onMounted(() => {
    const auth = getAuthComponent();

    if (props.tabs.length) {
        dataList.value = auth.filter((e) => props.tabs.includes(e.code))
    } else {
        dataList.value = auth
    }

    const tabIndex = dataList.value.findIndex((e) => e.code === props.selectedTab)
    if (tabIndex > -1) {
        dataIndex.value = tabIndex
    }
})
</script>