关于javascript:antdesignvue-2x-中Icon-组件动态渲染

vue3.0 时代来了，各个 UI 组件库都相继反对 vue3, ant-design-vue 也为了 vue3 提出了 ant-design-vue 2.x 版本，其中很很多组件也做了相应的调整，例如 Icon 组件。

从 2.0 开始，ant-design-vue 不再内置 Icon 组件，请应用独立的包 @ant-design/icons-vue

要应用 Icon 组件须要通过组件的模式援用：

import {StarOutlined, StarFilled, StarTwoTone} from '@ant-design/icons-vue';

<StarOutlined />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />

批改成组件模式后有个问题就呈现了，如果须要动静渲染怎么办？

例如上面这个例子：

<a-menu-item v-for="item in list" :key="item.name">
    < 此处如何动静搁置 icon>
    <span>{{item.name}}</span>
</a-menu-item>

const list = [
  {
    icon: 'UserOutlined',
    name: 'Home'
  }，{
    icon: 'UserOutlined',
    name: 'Home'
  }，]

antd 给提供了一个 createFromIconfontCN 办法，不便开发者调用在 iconfont.cn 上自行治理的图标。

import {createFromIconfontCN} from '@ant-design/icons-vue';
const MyIcon = Icon.createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成});
new Vue({
  el: '#app',
  template: '<my-icon type="icon-example"/>',
  components: {'my-icon': MyIcon,},
});

那如果想应用 antd 自带的 Icon，不思考应用其余插件须要怎么办呢？

咱们能够将 @ant-design/icons-vue 的所有组件都引入，而后设置一个全局属性存储。

main.js：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import * as antIcons from '@ant-design/icons-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
// 注册组件
Object.keys(antIcons).forEach(key => {app.component(key, antIcons[key])
})
// 增加到全局
app.config.globalProperties.$antIcons = antIcons

app.use(Antd).use(router).use(store).mount('#app')

应用：

<template>
    <a-menu-item v-for="item in list" :key="item.name">
        <component :is="$antIcons[item.icon]" />
        <span>{{item.name}}</span>
    </a-menu-item>
</template>

这样就能够动静援用啦，如果大家还有更好的办法，欢送留言。