原理:
使用原生js添加js、css 标签,在标签onload方法中回调 vue方法
这种处理方式路子比较野,基于正统VUE模板方式引入参考: vue引入外部js 、css 项目js、css文件 和网络链接js、css(如:cdn js)
代码如下:
mounted: function () {
var self = this;
this.loadCss("/static/style/js/tagsinput/bootstrap-tagsinput.css");
this.loadJs("/static/style/js/tagsinput/bootstrap-tagsinput.min.js");
this.loadJs("/static/style/js/wangEditor-2.1.23/wangEditor.js", function () {
self.initPage()
});
$('.navbar-fixed-bottom').css('position', 'inherit');
this.typeClass = this.$parent.$route.params.id;
this.getModule();
}, methods: {
loadJs(url, callback) {
loadScript = document.createElement("script");
loadScript.type = "text/javascript";
loadScript.src = url;
document.body.appendChild(loadScript);
loadScript.onload = loadScript.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
if (callback != null) {
callback();
loadScript.onload = loadScript.onreadystatechange = null;
}
}
};
}, loadCss(url) {
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.rev = "stylesheet";
cssLink.type = "text/css";
cssLink.media = "screen";
cssLink.href = url;
var x = document.getElementsByTagName("head")[0];
x.insertBefore(cssLink, x.firstChild);
}, initPage() {
var E = window.wangEditor
this.editor = new E('#editor')
this.editor.customConfig.uploadImgShowBase64 = true
this.editor.create();
$('#tagsinput').tagsinput({maxTags: 3});
},