ElementUI - 自定义全局 Loading 加载动图 spinner（不使用内置图标而是自定义动态图）

一时失言乱红尘 2023-01-18 04:11 36阅读 0赞

## 前言 ##

> ElementUI Loding 组件文档：[https://element.eleme.cn/\#/zh-CN/component/loading][https_element.eleme.cn_zh-CN_component_loading]

默认的样式如下图所示，更改加载图标为动态的 `GIF` 图片。  
![在这里插入图片描述][20210430164050455.png]  
改为自定义动图，但要注意 **底部的提示文字不能再使用了**。  
![在这里插入图片描述][20210430164226973.png]

## 实现 ##

> 如下示例是使用的 `服务方式` ，指令方式也是如此。  
> ![在这里插入图片描述][20210430164342599.png]

如下样式，便可覆盖样式达到效果，具体在什么地方使用请看最下面的 **示例**。

.el-loading-spinner .circular{ 
      width: 42px;
      height: 42px;
      animation: loading-rotate 2s linear infinite;
      display: none;
    }
    .el-loading-spinner{ 
      /* 图片替换为你自定义的即可 */
      background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1226402911,632147354&fm=26&gp=0.jpg') no-repeat;
      background-size: 48px 48px;
      width: 100%;
      height: 100%;
      position: relative;
      top: 50%;
      left: 50%;
    }

## 示例 ##

请去掉 `text` / `spinner` 配置，传空字符串即可。

export default { 
    
        name: 'Loding',
        
        created(){ 
            
            // 示例
            const loading = this.$loading({ 
              lock: true,
              text: '',
              spinner: '',
              background: '#FFFFFF'
            });
    
            // 两秒后关闭
            setTimeout(() => { 
              loading.close();
            }, 2000);
        }
    }

在本页面加入以下 `CSS` 即可完成覆盖，图片替换你的就可以，其他不用更改。

这时候效果就出来了。

[https_element.eleme.cn_zh-CN_component_loading]: https://element.eleme.cn/#/zh-CN/component/loading
[20210430164050455.png]: /images/20221021/50d1554c31f1468b93b8ab8849424687.png
[20210430164226973.png]: /images/20221021/951f595e631a4253b58ec587d447d66a.png
[20210430164342599.png]: /images/20221021/1b2b748675b045368c95cfe44e71213d.png