在vue 中优雅的引入远程js，远程css

资料来源：网络整理时间：2023/2/14 0:45:41 共计：3665 浏览

在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("执行阿里云播放器加载函数");
            }
}

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：C#邮件发送(含附件) | ·下一条：详解vue-video-player使用心得（兼容m3u8）