美文网首页
vue3 Ant Design Vue 动态加载图标Icon

vue3 Ant Design Vue 动态加载图标Icon

作者: 囧囧的猪 | 来源:发表于2022-03-09 10:37 被阅读0次

    以前用的其它的组件库,图标有标签,可以直接指定type即可,Ant Design Vue V3没有相应标签,只有<step-forward-outlined />这样的。为了能动态展示Icon,做了如下的处理

    1. 先下载图标库 (ant design的图标库要单独install)

    npm i --save @ant-design/icons-vue
    

    2. 下载完成后在 main.js 中添加

    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import * as Icons from '@ant-design/icons-vue'
    
    const app = createApp(App)
    
    // 注册图标组件
    for (const i in Icons) {
      app.component(i, Icons[i])
    }
    
    app.mount('#app)
    

    3. 在vue文件中使用 <component :is="icon">

    <template>
      <component :is="icon">
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    
    export default defineComponent({
      name: 'TestIcon',
      setup () {
        return {
          icon: ref('step-backward-outlined') // step-backward-outlined 在ant design vue 的icon里拷贝就可以
        }
      }
    })
    </script>
    

    4. 完成

    希望对有需要的兄弟有所帮助.

    相关文章

      网友评论

          本文标题:vue3 Ant Design Vue 动态加载图标Icon

          本文链接:https://www.haomeiwen.com/subject/myktdrtx.html