发布：2021/3/12 15:38:35作者：管理员 来源：本站 浏览次数：1360
在vue里引用远程js以及样式的问题解决方案（支持多个js，css引入）
Vue.component('remote-res', {
data() {
return {
loaded: false
};
},
render(createElement) {
let scs = [];
if (this.css) {
for (let i = 0; i < this.css.length; i++) {
let pps = {
attrs: {
rel: 'stylesheet',
href: this.css[i]
}
};
scs.push(createElement('link', pps));
}
}
if (this.vif && !this.vif()) {
if (!this.loaded) {
this.loaded = true;
if (this.scripts) {
for (let i = 0; i < this.scripts.length; i++) {
let pps = {
attrs: {
type: 'text/javascript',
src: this.scripts[i]
}
};
if (i === this.scripts.length - 1) {
pps.on = {
load: () => {
this.$emit("loaded");
}
};
}
scs.push(createElement('script', pps));
}
}
}
} else {
if (!this.loaded) {
this.loaded = true;
this.$emit("loaded");
}
}
return createElement('div', scs);
},
props: {
vif: {
type: Function,
required: true
},
scripts: {
type: Array
},
css: {
type: Array
},
},
})
使用说明
以引用阿里云点播js，css为例子：
页面部分
<remote-res
:css="['https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css']"
:scripts="['https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js'
]" :vif="isLoadAliyun"
@loaded="js_load"></remote-res>
方法部分
methods: {
isLoadAliyun() {
return window.Aliplayer;
},
js_load() {
//业务代码省略
console.log("执行阿里云播放器加载函数");
}
}
