elementui 自定义loading动画加载层

elementui 自定义loading动画加载层。main.js中添加

import { Loading } from 'element-ui'
/* 自定义加载层 */
Vue.prototype.openLoading = function(wer) {
  const loading = Loading.service({
    lock: true, // 是否锁屏
    text: '', // 加载动画的文字
    // spinner: 'inner-circles-loader', // 引入的loading图标
    background: 'hsla(0,0%,100%,0)', // 背景颜色
    target: document.querySelector(wer || '.el-dialog') // 作用的区域，使用传入的选择器，不传使用默认的.el-dialog
  })
  return loading
}

使用:

// 开始加载loading
const loading = this.openLoading() // 用法1
const loading = this.openLoading('#queryTable')// 用法2

// 关闭loading
loading.close()

来由：

element官网: 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();
});

需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：

let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true

此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。

如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法

l

o

a

d

i

n

g

，它的调用方式为：

t

h

i

s

.

loading，它的调用方式为：this.

loading，它的调用方式为：this.loading(options)，同样会返回一个 Loading 实例。

代码007普通

打赏 收藏 海报 链接