在向后端请求数据或向后端发送数据时,为防止用户在此期间乱操作,所以在页面添加一个加载提示的遮罩,防止用户乱操作。
相关代码:
let loading = this.$loading({
lock: true, // 显示/隐藏--默认为false
text: "加载中,请稍候...", //显示在加载图标下方的加载文案
background: "rgba(0,0,0,0.8)", //遮罩层颜色
spinner: "el-icon-loading", //自定义加载图标类名
});
loading.close();
使用方法:
在请求接口的位置,添加代码,接口请求成功,返回200后,调用关闭遮罩的方法。
confirm() {
let loading = this.$loading({
lock: true, //lock的修改符--默认是false
text: "加载中,请稍候...", //显示在加载图标下方的加载文案
background: "rgba(0,0,0,0.8)", //遮罩层颜色
spinner: "el-icon-loading", //自定义加载图标类名
});
const data = this.xxxData;
getList(data).then((response) => {
if (response.code == 200) {
loading.close(); //成功后关闭遮罩
this.$message({
message: "提交成功",
type: "success",
});
this.cancel();
}
});
}