When requesting or sending data to the backend, in order to prevent users from operating randomly during this period, a loading prompt mask is added to the page to prevent users from operating randomly.
Relevant code:
let loading = this.$loading({
lock: true, // 显示/隐藏--默认为false
text: "加载中,请稍候...", //显示在加载图标下方的加载文案
background: "rgba(0,0,0,0.8)", //遮罩层颜色
spinner: "el-icon-loading", //自定义加载图标类名
});
loading.close();
Instructions:
Add code at the location where the interface is requested, the interface request is successful, and after returning 200, call the method of closing the mask.
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();
}
});
}