1.创建Loading组件
<template>
<div class="loading">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>Loading...</p>
</div>
</template>
<script>
export default {
name: "Loading"
}
</script>
<style lang="scss" scoped>
.loading{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 99;
background-color: #262626;
}
p{
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%,-50%);
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
animation: animate 1.6s ease-in-out infinite;
}
@keyframes animate{
0%, 40%, 100% {
margin: 10px;
transform: translateY(30px);
}
20%{
transform: translateY(-30px);
}
}
ul li:nth-child(1){
animation-delay: -1.4s;
background-color: #86269b;
box-shadow: 0 0 50px #86269b;
}
ul li:nth-child(2){
animation-delay: -1.2s;
background-color: #fd7923;
box-shadow: 0 0 50px #fd7923;
}
ul li:nth-child(3){
animation-delay: -1s;
background-color: #00a03e;
box-shadow: 0 0 50px #00a03e;
}
ul li:nth-child(4){
animation-delay: -0.8s;
background-color: #F75940;
box-shadow: 0 0 50px #F75940;
}
ul li:nth-child(5){
animation-delay: -0.6s;
background-color: #c50d66;
box-shadow: 0 0 50px #c50d66;
}
ul li:nth-child(6){
animation-delay: -0.4s;
background-color: #1794ac;
box-shadow: 0 0 50px #1794ac;
}
</style>
2.在vuex中声明状态来操控loading组件的显示隐藏
export const SHOW_LOADING = 'showLoading'
export const HIDDEN_LOADING = 'hiddenLoading'
const state = {
isLoading:false
}
export default new Vuex.Store({
state
})
import {SHOW_LOADING, HIDDEN_LOADING} from './mutation-types'
[SHOW_LOADING](state){
state.isLoading = true
},
[HIDDEN_LOADING](state){
state.isLoading = false
}
3.在App.vue中挂载loading组件
<template>
<div id="app">
<nav-bar v-if="!$route.meta.keepAlive"/>
<loading v-show="$store.state.isLoading"/>
<router-view/>
</div>
</template>
4.配置Axios的请求拦截和响应拦截
import {SHOW_LOADING,HIDDEN_LOADING} from 'store/mutation-types'
import store from 'store'
instance.interceptors.request.use(config=>{
store.commit(SHOW_LOADING)
return config
},err=>{
console.log(err)
})
instance.interceptors.response.use(res=>{
store.commit(HIDDEN_LOADING)
return res
},error => {
console.log(error)
})