需求
当前需求是由于部分按钮操作的执行时间过长，因此添加遮罩层，防止用户误操作。
实现方式
在请求接口时创建遮罩层，并将遮罩层保存为全局唯一，请求成功或失败时，关闭遮罩层即可，切记，请求失败时一定要记得关闭。
公共方法
遮罩层的样式可自定义修改
// loading.js
import { Loading } from 'element-ui';
import store from '@/store/index.js';
/**
* 展示遮罩层
* @param {*} text 遮罩层显示的文本信息
*/
export const showLoading = (text) => {
// 先进行关闭
hideLoading()
// 创建遮罩层
let loadingInstance = Loading.service(
{
text : text,
lock: true,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}
);
// 定义全局
store.commit("SET_LOADING_INSTANCE", loadingInstance);
}
/**
* 隐藏遮罩层
*/
export const hideLoading = () => {
// 隐藏 loading 的逻辑
let loadingInstance = store.getters.loadingInstance
if (loadingInstance && loadingInstance != null) {
loadingInstance.close();
store.commit("SET_LOADING_INSTANCE", null);
}
}
调用方式
import {showLoading, hideLoading} from "@/util/loading";
// 在需要的地方去调用
// 弹出遮罩层
showLoading("loading")
发送请求.then(res =>{
this.$message({
type: "success",
message: res.data.msg
});
hideLoading()
// 刷新界面
this.handleRefresh()
})