Vue中怎么实现一个全局loading组件
Vue中怎么实现一个全局loading组件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
loading.js:
import './loading.css' let Loading = {} // 避免重复install,设立flag Loading.installed = false Loading.install = function (Vue) { if (Loading.installed) return Vue.prototype.$loading = {} Vue.prototype.$loading.show = () => { // 如果页面有loading则不继续执行 if (document.querySelector('#vue-loading')) return // 1、创建构造器,定义loading模板 let LoadingTip = Vue.extend({ template: `<div id="vue-loading"> <div class="loader"></div> </div>` }) // 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:
#vue-loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); } .loader:before { animation: before 2s infinite; } .loader:after { animation: after 2s infinite; } @keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); } 70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); } 100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } } @keyframes after { 0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } 35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); } 70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); } 100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } } /** * Attempt to center the whole thing! */ html, body { height: 100%; } .loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em); }
这样就可以直接在组件里面手动调用啦!
调用方法: this.$loading.show(), this.$loading.hide()
因为这个项目暂时规模很小,就只有注册功能,我直接把调用写在axios请求拦截器里面,每次请求和请求结束都会调用loading,这样就不用在页面里面手动调用啦。
看完上述内容,你们掌握Vue中怎么实现一个全局loading组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!