Un conjunto de iView de biblioteca de componentes de IU de alta calidad basado en Vue.js
loading.vue
<template>
<div class="loading">
<Spin fix size="large"></Spin>
</div>
</template>
<script>
import { Spin } from 'iview'
export default {
name: "loading"
}
</script>
<style lang="stylus">
.loading{
background #fff;
opacity 0.5;
width: 100%;
height: 100%;
position absolute;
top:0;
left:0;
right:0;
bottom :0;
z-index 9999;
}
</style>
1.loading.js
const loading = {
state:{
isLoading:false,
showModal:true
},
mutations:{
BEGIN_LOADING(state){
state.isLoading = true
},
END_LOADING(state){
state.isLoading = false
},
MODAL_LOADING(state){
state.showModal = false
}
},
actions:{
beginLoading({ commit }){
commit('BEGIN_LOADING')
},
endLoading({ commit }){
commit('END_LOADING')
},
modalLoading({ commit }){
commit('MODAL_LOADING')
}
}
};
export default loading
2. Introduzca store / index.js: también puede colocar loading.js directamente en la tienda en lugar de ser independiente de loading.js, según sus necesidades
import Vue from 'vue';
import Vuex from 'vuex';
import loading from './loading';
Vue.use(Vuex);
const store = new Vuex.Store({
modules:{
loading
}
});
export default store
3.main.js presenta el archivo de la tienda:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...
//挂载
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
4. Uso de interceptación de respuesta a solicitudes de datos de Axios:
import axios from 'axios';
import store from './store';
import router from './router'
axios.interceptors.request.use((config)=>{
......
//携带token
store.dispatch('beginLoading');
return config
});
axios.interceptors.response.use((config)=>{
......
store.dispatch('endLoading');
//获取token,验证,跳转
return config
})
Usado en el componente container.vue: se llama a la carga al salir
<template>
<div>
<div class="logout" @click="logout">退出</div>
<loading v-if="this.$store.state.loading.isLoading" v-show="this.$store.state.loading.showModal"></loading>
</div>
</template>
<script>
import loading from '../components/loading'
export default {
name: "container",
components:{
loading
},
methods:{
logout(){
this.$Modal.confirm({
content: "确认退出吗?",
closable:true,
cancelText:"取消",
okText:"确定",
loading: true,
onOk:()=>{
this.$store.dispatch('modalLoading');
axios.get('/api/logout').then(res=>{
console.log(res)
if(res.data.result){
sessionStorage.clear();
this.$Modal.remove();
this.$Message.info('退出成功');
localStorage.removeItem('xAuthToken');
this.$router.push('/login')
}
})
},
onCancel:()=>{}
});
},
}
</script>
Dado que no hay ningún componente de carga llamado antes en la página, agréguelo nuevamente.