1. loading.vue
<template>
<!-- mask是loading的背景 v-show控制loading显示消失 -->
<div class="mask" v-show="isShow">
<div class="loading"></div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
}
}
</script>
<style lang="scss">
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
.loading {
width: 30px;
height: 30px;
border: 6px solid rgb(219, 140, 13);
border-radius: 21px;
border-left-color: transparent;
animation: rotate 500ms infinite;
}
}
</style>
2. loading.js
import LoadingVue from './loading.vue'
export default {
install: (Vue) => {
const LoadingComponent = Vue.extend(LoadingVue);
const vm = new LoadingComponent();
const tpl = vm.$mount().$el;
document.body.appendChild(tpl);
Vue.prototype.$showLoading = () => {
vm.isShow = true
}
Vue.prototype.$hideLoading = () => {
vm.isShow = false
}
}
}
3. main.js
import loading from '@/components/common/js/loading.js'
Vue.use(loading)
4. http.js
import Vue from 'vue'
const vm = new Vue()
axios.interceptors.request.use(function (config) {
vm.$showLoading()
return config
}, function (error) {
vm.$hideLoading()
return Promise.reject(error)
})
axios.interceptors.response.use(function (response) {
vm.$hideLoading()
return response
}, function (error) {
vm.$hideLoading()
return Promise.reject(error)
})