vue 动态引入和移除第三方js 和 css文件
页面中经常会引入第三方库的情况,有些组件有vue版本,直接安装依赖引入就可以,但是有一些组件不支持vue,就需要单独在页面中引入js和css,如果直接全局在index.html中引入会造成资源浪费,下面是使用Vue3语言讲解如何局部引入和移除的代码示例:
//utils/utils.js
/**
* 动态加载第三方js.css
* @param {
*} src 路径
* @param {
*} isCss 是否为css文件
*/
function asynLoad(src, isCss = false) {
return new Promise(res => {
let el;
//设置js-map, css-map防止重复追加标签
let cssMap = new Map();
let jsMap = new Map();
if (isCss) {
let list = document.documentElement.getElementsByTagName('link');
for (let i = list.length - 1; i >= 0; i--) {
let item = list[i];
if (cssMap.get(item.stylesheet) == null) {
//利用map设置link css
cssMap.set(item.getAttribute('stylesheet'), i);
}
}
//不存在追加,存在直接返回true
if (cssMap.get(src) == null) {
el = document.createElement('link');
el.rel = 'stylesheet';
el.href = src;
appendDiv();
} else {
res(true);
}
} else {
let list = document.documentElement.getElementsByTagName('script');
for (let i = list.length - 1; i >= 0; i--) {
let item = list[i];
if (jsMap.get(item.src) == null) {
//利用map设置src js
jsMap.set(item.getAttribute('src'), i);
}
}
//不存在追加,存在直接返回true
if (jsMap.get(src) == null) {
el = document.createElement('script');
el.src = src;
appendDiv();
} else {
res(true);
}
}
function appendDiv() {
document.documentElement.appendChild(el);
//判断加载状态
el.onload = el.onreadystatechange = function () {
if (
!this.readyState ||
this.readyState == 'loaded' ||
this.readyState == 'complete'
) {
res(true);
}
this.onload = this.onreadystatechange = null;
};
}
});
}
/**
* 动态移除第三方js.css
* @param {
*} src 路径
* @param {
*} isCss 是否为css文件
*/
function asynRemove(src, isCss = false) {
let el;
if (isCss) {
let list = document.documentElement.getElementsByTagName('link');
for (let i = list.length - 1; i >= 0; i--) {
let styleValue = list[i].getAttribute('stylesheet');
if (styleValue && styleValue.indexOf(src) !== -1) {
el = list[i];
}
}
} else {
let list = document.documentElement.getElementsByTagName('script');
for (let i = list.length - 1; i >= 0; i--) {
let srcValue = list[i].getAttribute('src');
if (srcValue && srcValue.indexOf(src) !== -1) {
el = list[i];
}
}
}
el && document.documentElement.removeChild(el);
}
//导出
export {
asynLoad, asynRemove }
在页面中使用:
import {
onMounted, onUnmounted} from 'vue'
import {
asynRemove, asynLoad} from '@/utils/utils'
//在挂载后加载
onMounted(() => {
Promise.all([
asynLoad('./libs/xxxCss.css', true),
asynLoad('./libs/xxx11.js'),
asynLoad('./libs/xxx22.js'),
]).then(() => {
setTimeout(() => {
console.log("加载完毕后执行的操作");
}, 200)
}).catch(res => {
ElMessage.error("加载异常")
})
})
//在离开页面移除
onUnmounted(() => {
asynRemove('./libs/xxxCss.css', true);
asynRemove('./libs/xxx11.js');
asynRemove('./libs/xxx22.js');
})