Vue.use()自定义组件 注册为全局组件的方法

首先先创建一个自定义组件

@/components/IconFont/index.js

import { Icon } from 'ant-design-vue'
// 自定义icon 详情:https://www.antdv.com/components/icon-cn/
const IconFontObj = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2842321_v6st4dpxnc.js'
})
const IconFont = {
  install: function (vue) {
    vue.component('IconFont', IconFontObj)
  }
}
export default IconFont

然后在main.js 里面全局引入

import IconFont from '@/components/icon/iconFont'
import Vue from 'vue'
import IconFont from '@/components/icon/iconFont'
Vue.use(IconFont)

然后在任何vue里面使用

<span>
          <b title="标准煤"><icon-font type="icon-biaozhunmeipaifang" />0kgce</b>
          <a-divider type="vertical" />
          <b  title="碳排放"><icon-font type="icon-shuye1" />0kg</b>
        </span>

 

posted @ 2021-09-29 12:22  浅笑19  阅读(232)  评论(0编辑  收藏  举报