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'