MTP20_H5_PLUS/src/components/base/tab-component/index.vue

<template>
    <div :class="['app-tab-component', direction]" v-if="dynamicComponents.length">
        <ul class="tab">
            <template v-for="(item, index) in dynamicComponents" :key="index">
                <li class="tab-item" @click="componentChange(index)">
                    <slot :name="item.code" :item="item" :index="index">{{ item.title }}</slot>
                </li>
            </template>
        </ul>
        <div class="app-tab-component__container">
            <component :is="currentTabComponent.component" :name="currentTabComponent.code" v-bind="options"
                v-if="currentTabComponent" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { useDynamicComponent } from '@/hooks/component'

const props = defineProps({
    code: String,
    options: Object,
    // 组件内容方向
    direction: {
        type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
        default: 'top',
    },
})

const { dynamicComponents, currentTabComponent, componentChange } = useDynamicComponent(props.code);
</script>

<style lang="less">
@import './index.less';
</style>