【VUE】Load prompt mask

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();
            }
          });
        }

Guess you like

Origin blog.csdn.net/liusuihong919520/article/details/127904062