Vue：elementUI全局loading及自定义gif

1：创建工具类loading.js

import { Loading } from 'element-ui';

var loading = null;

export function loadingOpen(text){
  let options = {
    lock: true,
    text: text || "loading...",
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  }
  loading = Loading.service(options);
}


export function loadingClose(){
  if(loading){
    loading.close();
  }
}

2：main.js中引入

// 引入
import {loadingOpen,loadingClose} from '@/utils/loading.js';

// 挂载方法
Vue.prototype.loadingOpen = loadingOpen
Vue.prototype.loadingClose = loadingClose

3：使用

// 方法中调用
modelTest(){
    this.loadingOpen("执行中...");
    setTimeout(()=>{
        this.loadingClose();
    },2000);
},

4：自定义gif图片

创建free.css文件，如下：

.el-loading-spinner {
	background-image: url('../../assets/loading.gif') !important;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	height: 100px;
	width: 100%;
	background-position: center;
	top: 40%;
}

.el-loading-spinner .circular {/*隐藏 默认的 loading 动画*/
	display: none !important;
}

.el-loading-spinner .el-loading-text{
	margin-top: 100px !important;
}

.el-icon-loading:before{/*隐藏 默认的 loading 动画*/
	display: none !important;
}

5：main.js引入

// 样式要在element下面，要不然可能不生效
import './assets/styles/free.css'