Vue 全局loading组件实例详解

发布时间：2020-12-17 03:12:39 所属栏目：百科来源：网络整理

导读：上图不上种，菊花万人捅： loading.js: { // 如果页面有loading则不继续执行 if (document.querySelector('#vue-loading')) return // 1、创建构造器，定义loading模板 let LoadingTip = Vue.extend({ template: ` ` }) // 2、创建实例，挂载到文档以后的地

上图不上种，菊花万人捅：

loading.js:

{ // 如果页面有loading则不继续执行 if (document.querySelector('#vue-loading')) return // 1、创建构造器，定义loading模板 let LoadingTip = Vue.extend({ template: `

` }) // 2、创建实例，挂载到文档以后的地方 let tpl = new LoadingTip().$mount().$el // 3、把创建的实例添加到body中 document.body.appendChild(tpl) // 阻止遮罩滑动 document.querySelector('#vue-loading').addEventListener('touchmove',function (e) { e.stopPropagation() e.preventDefault() }) Loading.installed = true } Vue.prototype.$loading.hide = () => { let tpl = document.querySelector('#vue-loading') document.body.removeChild(tpl) } } export default Loading

　　loading.css:

　　这样就可以直接在组件里面手动调用啦！

　　调用方法： this.$loading.show(),this.$loading.hide()

　　因为这个项目暂时规模很小，就只有注册功能，我直接把调用写在axios请求拦截器里面，每次请求和请求结束都会调用loading，这样就不用在页面里面手动调用啦。

总结

以上所述是小编给大家介绍的Vue 全局loading组件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!