Vue 自定义ElementUI的Loading效果

import {  loadingText, messageDuration } from "@/settings";

import { Loading } from "element-ui";
// loadingText、messageDuration 这两个参数我是调的公共配置文件,按自己需求来 
const install = (Vue, opts = {}) => {

  /* 全局多彩Loading加载层 */
  Vue.prototype.$baseColorfullLoading = (index, text, callback) => {
    let loading;
    if (!index) {
      loading = Loading.service({
        lock: true,  // 是否锁屏
        text: text || loadingText, // 加载动画的文字
        spinner: "dots-loader",  // 引入的loading图标
        background: "hsla(0,0%,100%,.8)", // 背景颜色
      });
    } else {
      switch (index) {
        case 1:
          index = "dots";
          break;
        case 2:
          index = "gauge";
          break;
        case 3:
          index = "inner-circles";
          break;
        case 4:
          index = "plus";
          break;
      }
      loading = Loading.service({
        lock: true,  // 是否锁屏
        text: text || loadingText, // 加载动画的文字
        spinner: index + "-loader", // 引入的loading图标
        background: "hsla(0,0%,100%,.8)", // 背景颜色
        target: document.querySelector('.app-main-container'),  // **需要遮罩的区域
        // (我这里是指要求遮盖组件,如果你想全屏遮盖住，可以不要这行代码)
      });
    }
    if (callback) {
      callback(loading);
    } else {
      setTimeout(() => {
        loading.close();
      }, messageDuration);
    }
  };

};

if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default install;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

调用

  // index可以填写1-4,4种效果
  this.$baseColorfullLoading(3)
1
2