ElementUI 全局、elementui全局loading

在使用ElementUI进行项目开发时，实现全局Loading功能可以提升用户体验。介绍几种实现ElementUI全局Loading的方法。

一、解决方案

我们可以通过Vue的插件机制或者直接利用ElementUI提供的Loading服务来实现全局Loading效果。这些方法都能实现在页面加载、数据请求等场景下显示Loading动画，告知用户当前处于等待状态。

二、基于Vue插件的实现

1. 创建插件
   • 创建一个名为loadingPlugin.js的文件。
     javascript
import Loading from 'element-ui/lib/loading';
export default {
install(Vue) {
// 定义一个全局属性来控制loading状态
Vue.prototype.$loading = false;
Vue.prototype.$startLoading = function () {
this.$loading = true;
this.loadingInstance = Loading.service({
fullscreen: true,
lock: true,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
};
Vue.prototype.$endLoading = function () {
this.$loading = false;
this.loadingInstance.close();
};
}
};

   • 在main.js中引入并使用插件：
     javascript
import Vue from 'vue';
import App from './App.vue';
import loadingPlugin from './plugins/loadingPlugin';// 假设把loadingPlugin.js放在了plugins文件夹下
Vue.config.productionTip = false;
Vue.use(loadingPlugin);
new Vue({
render: h => h(App),
}).$mount('#app');

2. 在组件中使用
   • 当需要开启全局Loading时，在组件的方法中调用this.$startLoading()，例如在一个发送网络请求之前：
     javascript
methods: {
fetchData() {
this.$startLoading();
axios.get('url')
.then(response => {
console.log(response);
this.$endLoading();
})
.catch(error => {
console.error(error);
this.$endLoading();
});
}
}


三、使用Vuex管理Loading状态

1. 在Vuex中定义state和mutations
   • 在store.js中：
     javascript
import Vue from 'vue';
import Vuex from 'vuex';
import Loading from 'element-ui/lib/loading';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLoading: false,
loadingInstance: null
},
mutations: {
START_LOADING(state) {
state.isLoading = true;
state.loadingInstance = Loading.service({
fullscreen: true,
lock: true,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
},
END_LOADING(state) {
state.isLoading = false;
state.loadingInstance.close();
}
},
actions: {
startLoading({ commit }) {
commit('START_LOADING');
},
endLoading({ commit }) {
commit('END_LOADING');
}
}
});

2. 在组件中通过mapActions映射actions
   javascript
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['startLoading', 'endLoading']),
fetchData() {
this.startLoading();
axios.get('url')
.then(response => {
console.log(response);
this.endLoading();
})
.catch(error => {
console.error(error);
this.endLoading();
});
}
}
}


以上就是实现ElementUI全局Loading的两种主要思路，可以根据项目实际情况选择合适的方法。