原创 

VUE像jquery 一样加载js、css;vue 动态加载外部js、css

分类:前端    1162人阅读    IT小君  2021-07-08 19:56

原理:

使用原生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});
                },


支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»