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 覆蓋 結束*/