Vue3——tdesign-vue-next如何按需加载动态渲染ICON

2024-06-25 08:20:39 浏览数 (2)

前言

如题，在vue3中进行按需加载来动态的渲染icon图标;

在线案例：https://stackblitz.com/edit/9ufmeo?file=src/demo.vue

内容

代码语言：javascript复制

<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>

0 人点赞