Vue开发：三方库扩充功能

发表于 更新于 分类于 阅读次数：
本文字数： 2.3k 阅读时长 ≈ 2 分钟
不会偷懒的程序员不是一个好的程序员 (bushi
但是，有现成封装好的组件库为什么不用呢？

Echarts

1.v-for循环图表时只显示第一个图表

错误现象：当某个子组件专门封装了一个Echarts图表，在父组件中循环子组件时会出现只有第一个子组件可以正常渲染，剩下的子组件图表不正常显示

错误原因：因为在循环的时候 Echarts 图表的容器id都是一样的，导致 Vue 无法判断后面几个图表怎么渲染，所以就显示异常

解决办法：当使用 v-for 时，我们可以获取到index值，因此直接在id上使用 ES6 的模板字符串引入这个index值，同时在实例化 Echarts 时也这样即可正常显示

1
2
<div class="chart" :id="`pieEcharts${index}`"></div>
const pieEcharts = echarts.init(document.getElementById(`pieEcharts${this.index}`));

2.使用resize()方法时报错

报错信息：Cannot read properties of undefined (reading 'type')

报错原因：Vue3中使用 proxy 的方式监听响应式，Echarts 的实例会在 Vue 内部转换成响应式对象，从而在执行 resize() 方法时获取不到 coordSys.type

解决办法：在实例化 Echarts 时，将其指定为非响应式即可，如下：

1
const chartsInstance: echarts.ECharts = markRaw(echarts.init(document.getElementById('echarts')));

原文链接：源自 @Bin_x

Font Awesome

我们常会在项目中使用各种的图标字体，Font Awesome 会是很多人不错的选择

Font Awesome 5也支持了在 Vue 中通过 Component 的形式来引入图标

官网详细的说明了如何在 Vue 中引入，但却是针对于 Vue2的

以下总结 Vue3+Vue-cli5 中如何引入 Font Awesome

1.安装

根据如下命令进行安装依赖：

1
2
3
4
5
6
7
8
9
10
11
// 安装核心库
npm i --save @fortawesome/fontawesome-svg-core
 
// 安装免费图标类型（可选，并非全部安装）
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
 
// 安装 Font Awesome 在Vue中的组件
Vue2中： npm i --save @fortawesome/vue-fontawesome@latest
Vue3中： npm i --save @fortawesome/vue-fontawesome@prerelease

关于 Vue2 与 Vue3 安装的区别，可前往 GitHub 进行查看

2.注册

根据 官网 流程操作即可，但需注意的是——官网中依然是 Vue2 的教程，所以你需要在 main.js 中这样更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Vue3 默认导出不再是 Vue 了
import { createApp } from 'vue';
import App from './App';
// 引入库和图标类型（描边和实心）
import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
// 向库中按需引入图标
library.add(faUserSecret);
// 创建 Vue 的实例
const app = createApp(App);
// 添加字体图标组件
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

3.使用

当在 main.js 文件中添加字体图标组件后，我们就可以像正常的组件一样使用了，如：

1
2
3
4
5
6
7
// X 官网案例不生效，应该是Vue2下的
<font-awesome-icon icon="fa-solid fa-user-secret" />
// √ Github案例1生效
<font-awesome-icon icon="user-secret" />
// √ Github案例2生效(这里传入的第一个参数表示图标类型，第二个参数表示图标class名)
// fas：solid，fab：brands，far：regular，fal：light，fad：duotone
<font-awesome-icon :icon="['fas', 'user-secret']" />