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;

调用

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

在这里插入图片描述

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值