Vue自定义全局组件,使用iconfont添加自定义图标

最近在使用antd-v搞前端,想让国际化切换语言时图标也跟着换。

首先,先去 iconfont.cn 挑选想要的图标,加入购物车,然后下载下来解压。主要使用iconfont.js即可,demo_index.html里有使用方法,iconfont.css也可以看看。把 iconfont.js 放入 src/assets/iconfont/ 目录中,然后在 main.js 中注册自定义图标组件:

import {Icon} from 'ant-design-vue'
import iconFont from '@/assets/iconfont/iconfont'

// 添加iconfont
const iconfont = Icon.createFromIconfontCN({
    scriptUrl: iconFont
})
Vue.component('icon-font', iconfont)

修改加载国际化图标逻辑:

<div v-if="langAlias === 'CN'">
  <icon-font type="icon-zhongwen"/>
</div>
<div v-else-if="langAlias === 'US'">
  <icon-font type="icon-yingwen"/>
</div>

如果启动服务报 no-self-assign 错误:可以找到 eslint-recommended.js 将 "no-self-assign": "error", 此行注释掉即可。

// 报错信息如下:
  ERROR  Failed to compile with 1 errors                                                                                                    

 error  in ./src/assets/iconfont/iconfont.js

Module Error (from ./node_modules/eslint-loader/index.js):

~/thor-frontend/src/assets/iconfont/iconfont.js
  1:2123  error  't' is assigned to itself  no-self-assign

 ✖ 1 problem (1 error, 0 warnings)

// 解决
打开 ~/thor-frontend/node_modules/eslint/conf/eslint-recommended.js
注释此行 → // "no-self-assign": "error",

直接自定义一个 Iconfont 全局组件,首先将iconfont.js放在src/assets/js目录中,在src/components下新建iconfont文件夹,在里边创建 index.js 文件,内容如下:

import Vue from 'vue'
import {Icon} from 'ant-design-vue'
import iconFont from '@/assets/js/iconfont'

// 添加iconfont
const iconfont = Icon.createFromIconfontCN({
    scriptUrl: iconFont
})

Vue.component('icon-font', iconfont)

export default {
    name: 'Iconfont'
}

然后在main.js只需添加如下两行即可,这样看上去更优雅一些。

import Iconfont from '@/components/iconfont'
Vue.use(Iconfont)

最终效果如下:

Vue自定义全局组件,使用iconfont添加自定义图标

anzhihe 安志合个人博客,版权所有 丨 如未注明,均为原创 丨 转载请注明转自:https://chegva.com/5164.html | ☆★★每天进步一点点,加油!★★☆ | 

您可能还感兴趣的文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注