elementui自带loading太小 自定义loading

main.js中加入

import 'element-ui/lib/theme-chalk/index.css'
import { Loading } from "element-ui";
Vue.prototype.openLoading = function () {
  const loading = Loading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.1)',
    spinner: 'my-el-custom-spinner',
  })
  setTimeout(function () {
    loading.close();
  }, 10000)
  return loading;
}

入口文件 一般是App.vue里面加入覆盖CSS

/*elementui loading css 覆盖 开始*/
.el-loading-mask.is-fullscreen {
    z-index: 14000 !important;  //因为我的header的z-index比较大。这里看情况
}
.my-el-custom-spinner {
    background: url("./assets/images/loading.gif");//这个图自己百度"loading gif"，肯定能找到
    background-size: 40px 40px; //长宽自己设置
    width: 40px;
    height: 40px;
    display: inline-block; 
}
.el-loading-spinner {
    top: 40% !important;//这是控制loading位置的
}
/*elementui loading css 覆盖 结束*/