VUEElementUI自定义Loading图原创

原标题：VUE-ElementUI 自定义Loading图
原创

需求：

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

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

虽然文档中有些， element-loading-spinner="el-icon-文章来源站点https://www.yii666.com/loadiwww.yii666.comng" 可指定自定义图

但经测试，也只是只能再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;
文章来源地址34515.html 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文章来源地址34515.html 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

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(
www.yii666.com {
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图效果

来源于：VUE-ElementUI 自定义Loading图
原创