Vue 自定义ElementUI的Loading效果

Mr.app2024-06-25 15:32

javascript 复制代码

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;

调用

javascript 复制代码

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