VUE-ElementUI 自定义Loading图操作

需求：

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

注意，这里 不要加上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图效果

补充知识：vue+elementUI自定义通用table组件

自定义通用table组件,带分页,后端排序,路由带参数跳转,多选框,字段格式化

1.tableList组件

2.组件使用

3.appMain.js

 class appMain {
 
  }
// 时间格式化
  formatDate(date, fmt) {
    var date = new Date(date)
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    };
    for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        let str = o[k] + '';
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
      }
    }
    return fmt;
  };
  padLeftZero(str) {
    return ('00' + str).substr(str.length);
  }
export default new appMain()

以上这篇VUE-ElementUI 自定义Loading图操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。