import { ref, reactive, toRaw, markRaw, defineAsyncComponent, onMounted } from 'vue'
import type { Component } from 'vue'

// vue3+vite 批量引入组件动态使用
const modules = import.meta.glob<Component>('./details/*.vue') // 明确指定导入的模块类型为Component
const components: any = ref({})
Object.entries(modules).forEach(([path, asyncCom]) => {
  const name = path.replace(/\.\/details\/(.*)\.vue/, '$1')
  try {
    components.value[name] = markRaw(defineAsyncComponent(asyncCom))
  } catch (error) {
    console.error(`动态导入组件 ${name} 时出错:`, error)
  }
})

使用

<main class="card-bg mt-16">
      <!-- 这里可以使用生成的list数组来动态渲染el-tabs组件，示例如下 -->
      <el-tabs type="border-card" v-model="state.cardActive">
        <el-tab-pane v-for="(tab, index) in state.tabs" :key="index" :label="tab.label" :name="tab.key">
          <component :is="components[tab.key]" />
        </el-tab-pane>
      </el-tabs>
    </main>