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: `

})

// 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.http://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,http:// 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, 3http://2, 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组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。