Vue 全局loading组件实例详解
更新时间:2018年05月29日 11:14:03 作者:小葱葱葱包
这篇文章主要介绍了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组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
vue-router 中router-view不能渲染的解决方法
本篇文章主要结合了vue-router 中router-view不能渲染的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05
最新评论