Loading 加载:加载数据时显示动效。

Loading 可以以服务的方式调用。

引入 Loading 服务:

import { Loading } from 'element-ui';

在需要调用时:

Loading.service(options);

其中 options 参数为 Loading 的配置项,具体见下表。LoadingService 会返回一个 Loading 实例,可通过调用该实例的 close 方法来关闭它:

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
});

在这里插入图片描述
实例:

let loading;

//定义加载动画
function startLoading() {
    // Loading.service(options); options 参数为 Loading 的配置项
    // 使用loading变量来接收Loading.service返回的实例
   
    loading = Loading.service({
        lock:true,    //是否锁定
        text:"拼命加载中...",   //显示在加载图标下方的加载文案
        background:'rgba(0,0,0,.7)',   //遮罩背景色
    });
}

//结束加载动画,调用该实例的 close 方法来关闭
function endLoading(){
    loading.close();
}

Logo

前往低代码交流专区

更多推荐