javascript - VUE3+element-plus如何在组件内动态加载element-plus组件？

Question

系统使用了element-plus按需载入的方式

我需要在一个组件内动态加载某些组件

<template>    <component :is="loader(conf.type)" v-model="modelValue[conf.key]"/></template><script setup lang="ts">async function loader(type: keyof typeof Modules) {  return defineAsyncComponent({      loader: () => import('element-plus')['ElInput']  })}</script>

这个loader方法一直无法正确渲染相应组件，例如type传入“ELInput”时系统会报个警告

[Vue warn]: Component is missing template or render function.   at <Anonymous ref_for=true ref="formKit-component-a" key="a"  ... >   at <ElFormItem label=undefined label-width="120px" prop="a"  ... >   at <ElCol key="a" span=24 >   at <ElRow gutter=30 type="flex" style= {row-gap: '0px'}  ... >   at <ElForm ref=1698981590012 model= {a: 1} key=1698981590012  ... >   at <Index modelValue= {a: 1} onUpdate:modelValue=fn config= [{…}] >   at <Fuck onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/home/fuck" >   at <KeepAlive>   at <BaseTransition mode="out-in" appear=false persisted=false  ... >   at <Transition name="router-fade" mode="out-in" >   at <RouterView>   at <Main>   at <ElMain>   at <ElContainer>   at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >   at <RouterView>   at <ElConfigProvider locale= {name: 'zh-cn', el: {…}} size="default" >   at <App>

尝试过import('element-plus/lib/components/ElInput')这种写法页不行，报错：[plugin:vite:import-analysis] No known conditions for "./lib/components/ElInput" specifier in "element-plus" package

求大神指导

Answer 1

建议改为 计算属性，因为涉及异步加载组件，我这边有实现加载成功