1、在app.vue,先引入你的loading组件
app.vue
<template>
<div id="app">
<router-view/>
<div class="load_cover" v-if="showLoading">
<!-- <van-loading /> -->
<van-loading color="red"/>
<!-- <van-loading type="spinner" /> -->
<!-- <van-loading type="spinner" color="white" /> -->
</div>
</div>
</template>
<script>
// 引入vuex的辅助方法
import { mapState } from 'vuex'
import Vue from 'vue'
// 引入loading插件,自己的也可以哦,直接在组件上判断显示隐藏即可
import { Loading } from 'vant'
Vue.use(Loading)
export default {
// computed: mapState({
// showLoading: (state) => state.showLoading
// })
computed: {
...mapState([
'showLoading'
])
}
}
</script>
<style>
.van-loading__circular circle{
stroke-width: 5px;
}
.van-loading{
width: 40px;
height: 40px;
top: 40%;
left: 50%;
transform: translateX(-50%)
}
.load_cover{
width: 100%;
height: 100%;
background: rgba(255,255,255,.5);
z-index: 999;
position: fixed;
left: 0;
top:0;
}
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
}
</style>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
openId: '',
code: '',
showLoading: true
},
mutations: {
updateLoading (state, showLoading) {
state.showLoading = showLoading
}
}
})
request.js
这里我是把axios单独的抽出来了,如果你在main.js里,直接在main.js引入拦截器也是一样的
import store from '../store/store'
import axios from 'axios'
const service = axios.create({
baseURL: 'http://666.6666666.666'
})
service.interceptors.request.use((config) => {
store.commit('updateLoading', true)
return config
}, (err) => {
return Promise.reject(err)
})
service.interceptors.response.use((response) => {
store.commit('updateLoading', false)
if (response.status === 200) {
return response.data
} else {
return {code: -2}
}
}, (err) => {
return Promise.reject(err)
})
export default service
over警告~