比如进入一个页面数据加载缓慢的页面后,等待后端返回数据显示在页面时给个loading的样式,像下面这样:
在这里插入图片描述
代码实现如下:

 getStudent() {
      // 开始加载
      let loading = this.$loading({
        lock: true,//lock的修改符--默认是false
        text: "拼命加载中,请稍候...",//显示在加载图标下方的加载文案
        background: "rgba(0,0,0,0.8)",//遮罩层颜色
        spinner: "el-icon-loading",//自定义加载图标类名
      });
      getStudent().then(res => {
        if (res.code === 200) {
          this.user = res.data;
          // 获取数据显示成功后,关闭loading
          loading.close();
        } else {
          this.$message.error("错误!");
        }
      });
    }

参数列表说明如下(详细可以观看elementUI官网):

参数说明类型默认值
targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点object/stringdocument.body
body同 v-loading 指令中的 body 修饰符booleanfalse
fullscreen同 v-loading 指令中的 fullscreen 修饰符booleantrue
lock同 v-loading 指令中的 lock 修饰符booleanfalse
text显示在加载图标下方的加载文案string
spinner自定义加载图标类名string
background自定义加载图标类名string
customClass自定义加载图标类名string
Logo

前往低代码交流专区

更多推荐