Vue中动态加载css、js、字体
1.首先封装三个公用方法//动态加载cssloadStyle(url) {var link = document.createElement('link');link.type = 'text/css';link.rel = 'stylesheet';link.href = url; //css链接var head = document.getElementsByTagName('head')[0
·
1.首先封装三个公用方法
//动态加载css
loadStyle(url) {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url; //css链接
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
},
//动态加载字体
loadFont(name, url) {
//name 字体名称
//url 字体链接
let style = document.createElement('style');
style.type = 'text/css';
style.innerText = '@font-face {font-family:' + name + ';src:url(' + url + ')};font-display: swap';
document.getElementsByTagName('head')[0].appendChild(style);
},
//动态加载js
loadJs(url) {
var link = document.createElement('script');
link.type = 'text/javascript';
link.src = url; //js链接
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
},
2.在Vue生命周期mounted中调用公共方法
mounted() {
let cssUrl = ''
let jsUrl= ''
let fonUrl= ''
this.loadStyle(cssUrl);
this.loadJs(jsUrl);
this.loadFont(fonUrl)
},
这样就ok了。
更多推荐
已为社区贡献2条内容
所有评论(0)