vue+element-UI 全局自定义加载动画

借鉴学习，个人笔记

一、选取loding图片加入文件 ../assets/img/loding.gif ../assets/css/pageLoading.css

二、创建一个css样式

.el-loading-spinner {
    /*这个是自己想设置的 gif 加载动图*/
    background-image: url('../img/loding.gif');
    background-repeat: no-repeat;
    background-size: 250px 226px;
    height: 50%;
    width: 100%;
    background-position: center;
 
    top: 20% !important;
}

.el-loading-spinner .circular {
    /*隐藏 之前  element-ui  默认的 loading 动画*/

    display: none;

}

.el-loading-spinner .el-loading-text {
    /*为了使得文字在loading图下面*/
    margin: 150px 0px;
}

三、引入request 全局请求 在element的loding挂载之后 引入自己的样式替换原有动画

import axios from "axios";
import router from "../router";
import store from "./../store";
import { Loading, Message } from "element-ui"; //引入Loading服务
console.log(process.env.VUE_APP_BASE_URL, process.env.VUE_APP_MODE, 9999);

//开始加载动画
var loading;
var loadingNum = 0; //初始化接口数量
export function startLoading() {
  loading = Loading.service({
    lock: true, //是否锁定
    // text: "Loading...", //加载中需要显示的文字
    background: "rgba(255,255,255,.5)", //背景颜色
  });
}
//结束加载动画
export function endLoading() {
  loading.close();
}

import pageLoading from "../assets/css/pageLoading.css";