如题,在vue3中进行按需加载来动态的渲染icon图标;
在线案例:https://stackblitz.com/edit/9ufmeo?file=src%2Fdemo.vue
<template>
<t-space direction="vertical">
<t-space break-line v-for="(item, index) in iconList" :key="index">
<component :is="iconList[index]" />
</t-space>
<t-space break-line v-for="(item, index) in iconConfig" :key="index">
<component :is="iconObject[item.icon]" />
</t-space>
</t-space>
</template>
<script setup>
import { Download1Icon, TabIcon } from 'tdesign-icons-vue-next';
import { markRaw, reactive } from 'vue';
const iconList = reactive([markRaw(Download1Icon), markRaw(TabIcon)]);
const iconConfig = [{ icon: 'Download1Icon' }, { icon: 'TabIcon' }];
const iconObject = reactive({
Download1Icon: markRaw(Download1Icon),
TabIcon: markRaw(TabIcon),
});
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。