Vue 3 基于 Props 动态导入-PHP中文网问答

文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Vue 3 基于 Props 动态导入

P粉388945432 2023-11-16 11:40:01

478

我正在使用 unplugin-icon 创建一个图标组件，通常情况下我可以导入例如

//script
import IconCopy from '~icons/prime/copy'
//template
<IconCopy/>

它可以工作，但是如果我们想使用另一个图标，那么逐个导入感觉不方便，所以我创建了一个名为 Eunoicon.vue 的动态组件

<script setup>
const props = defineProps({
    icon : {type:String}
})
const from = `~icons/prime/${props.icon}`
const TheIcon = await import(/* @vite-ignore */from)
console.log('ti',TheIcon)
</script>
<template>
<TheIcon/>  
</template>

但是当我尝试将其导入到组件时，它会抛出错误 Uncaught (in Promise) TypeError: 无法解析模块说明符 '~icons/prime/copy'. 对于这种方法或任何提供简单方法的图标库有什么建议吗？我已经尝试过 vue font Awesome 但仍然没有我想要的那么简单。

P粉388945432

全部回复(1)

P粉3962485782023-11-17 10:34:12 1 楼

不幸的是，目前无法动态创建导入。几个月前我发现自己遇到了同样的问题。我的解决方案是将图标视为 SVG 并创建一个附加到我的项目的导入文件，如下所示：

interface SvgObject {
  [key: string]: Function;
}

export function importSvg(icon: string) {
  const svg = {
    "sliders-horizontal": () => {
      return '      ';
    },
}

并创建一个视图组件，如下所示，借助道具，该组件将检索与给定名称相对应的图标。

当然，手动创建导入文件会很麻烦，因此在我的例子中，我创建了一个 python 脚本，该脚本采用 SVG 图标文件夹的路径并处理每个图标以缩小它们并自动创建导入文件。该脚本适用于荧光粉图标库中的图标。您可以在 github 存储库中找到脚本和 Vue 组件的代码：

https://github.com/fchancel/Phosphor-icon-vue-component

如果您决定使用 Phosphor 图标，请毫不犹豫地受到启发、修改它或使用它