上图不上种，菊花万人捅：
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> <div></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-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
vue实现图片加载完成前的loading组件方法
vue-infinite-loading2.0 中文文档详解
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Vue2.0 http请求以及loading展示实例
vue2实现数据请求显示loading图
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
