需求：

      element ui loading图只能使用自己的loading图，

      但很多场景下，需要替换成自己的gif图

      虽然文档中有些， element-loading-spinner="el-icon-loading"  可指定自定义图

      但经测试，也只是只能再elementui 图标库中的图， 不是我们想的那个自定义图类的意思。

 

自定义图方法:

 

1） 添加自定义elementUI loading样式

    

asserts下 新建CSS文件夹 及CSS文件比如myCss.css

再里面，写入自定义的element类CSS样式

.el-loading-spinner{
     /*这个是自己想设置的 gif 加载动图*/
     background-image:url('../img/loading.gif');
     background-repeat: no-repeat;
     background-size: 200px 120px;
     height:100px;
     width:100%;
     background-position:center;
     /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
     top:40%;
 }
.el-loading-spinner .circular {
    /*隐藏 之前  element-ui  默认的 loading 动画*/

    display: none;

}

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

 

CSS 细调，需要在浏览器调试工具中细调

 

2）main.js 导入自定义样式

这里注意，要在导入elementUI之后，再导入自己的样式，要不然会被elementUI覆盖

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);  //element 



//自定义的element UI loading样式
import './assets/css/myCss.css'

 

 

3) v-loading

 

    <el-container
            v-loading="loading"
            element-loading-background="rgba(255, 255,255, 0.5)"
            element-loading-text="加载中..."


    >

注意，这里 不要加上element-loading-spinner="el-icon-loading" ，否则 也会同时出现element图库中对应的loading图

4）对应加载逻辑

 data () {
    return {


      loading: true

    }
  },

        startLoading()
        {

            this.loading=true;

        },

        endLoading(){
            this.loading=false;
        },

 

  axios请求接口时，开始loading,收到数据后，loading结束

        Ajx_GetClassList()
        {

            this.startLoading();

             this.$axios(
                {
                    url: url,
                    method:'POST',
                }
            ).then(res=>{

                   this.endLoading();

                })

        },

 

 

5)  运行时，是正常显示，但编译后，看不到自定义的图片资源了

     原因，VUE项目打包后，样式目录结构变为static/css 

     解决

    build->utils.js 配置文件添加

    publicPath: '../../'

 

   // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',  // 解决element-ui中组件图标不显示问题
        fallback: 'vue-style-loader'
      })

   

 

这样，编译后的element-ui资源也可以正常访问了

 

 

 

自定义loading图效果