VUE-ElementUI 自定义Loading图操作


Posted in Javascript onNovember 11, 2020

需求:

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

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

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

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

自定义图方法:

1) 添加自定义elementUI loading样式

VUE-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 细调,需要在浏览器调试工具中细调

VUE-ElementUI 自定义Loading图操作

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资源也可以正常访问了

VUE-ElementUI 自定义Loading图操作

自定义loading图效果

VUE-ElementUI 自定义Loading图操作

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

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

1.tableList组件

<!-- 费用报销编辑弹框 -->
<template>
  <div class="table-temp">
    <el-table
      :data="tableData"
      border
      size="mini"
      fit
      highlight-current-row
      height="500"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center" fixed></el-table-column>
      <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), active: 是否有操作列
      active.name: 操作列字段名称, active.clickFun: 操作列点击事件, formatData: 格式化内容-->
      <el-table-column
        v-for="(item, key) in tableHeader"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :min-widitem="item.minWidth"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <div v-if="item.active">
            <el-button
              v-for="(o, key) in item.active"
              :key="key"
              @click="handleActive(scope.row, o.router, o.routerId)"
              type="text"
              size="small"
            >{{o.name}}</el-button>
          </div>
          <div v-else>
            <a class="btn-a"
              v-if="item.router"
              @click="handleActive(scope.row,item.router, item.routerId)"
            >
              <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
              <span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
            </a>
            <div v-else>
              <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
              <span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.pageIndex"
        :page-size="pagination.pageSize"
        :total="pagination.pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
var _ = require('lodash');
export default {
  props: {
    tableData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    tableHeader: {
      type: Array,
      default: function() {
        return [];
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: {
        pageIndex: 0,
        pageSize: 15,
        pageTotal: 0
      }
    }
  },
  data() {
    return {
      multipleSelection: [],
      newPagination: {
        pageIndex: 0,
        pageSize: 15,
        pageTotal: 0
      }
    };
  },
  methods: {
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('selectFun', { backData: this.multipleSelection });
    },
    // 分页导航
    handlePageChange(val) {
      console.log('handlePageChange:', val);
      this.$set(this.pagination, 'pageIndex', val);
      //调用父组件方法
      this.$emit('pageChange', { backData: this.pagination});
    },
    // row:本行数据,route:要跳转的路由路径,跳转要传的参数routeId
    handleActive(row, route, routeId) {
      console.log(row);
      this.$router.push({
        path: '/' + route,
        query: {
          id: row[routeId]
        }
      });
    },
    //后端排序
    sortChange(column) {
      //console.log('sortChange:', column);
      //调用父组件方法
      this.$emit('sortChange', { backData: column });
    }
  },
  watch: {
    
    }
  },
  computed: {
  },
  created() {
  }
};
</script>
<style scoped>
.btn-a{
  color: #409EFF
}
</style>

2.组件使用

<template>
  <div>
<!-- 表格 -->
      <table-List
        :tableData="tableData"
        :tableHeader="tableHeader"
        :loading="loading"
        :pagination="pagination"
        @pageChange="pageChange"
        @selectFun="selectFun"
        @sortChange="sortChange"
      ></table-List>
  </div>
</template>
<script>
import appMain from '../../../utils/app_main';
export default {
  data() {
    return {
//    请求加载
      loading: false,
      // 分页信息
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        pageTotal: 60
      },
      tableHeader: [
        // 表头数据
        { prop: 'id', label: '离职编号', minWidth: '100px', router: 'quitDetail', routerId: 'id', sortable: 'custom' },
        {
          prop: 'resignationUserName',
          label: '姓名',
          router: 'employeeDetail',
          routerId: 'resignationUserId',
          sortable: 'custom'
        },
        { prop: 'departName', label: '部门', minWidth: '100px', sortable: 'custom' },
        { prop: 'jobRole', label: '所在岗位', sortable: 'custom' },
        {
          prop: 'onbordingTime',
          label: '入职日期',
          formatData: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd');
          },
          sortable: 'custom'
        },
        {
          prop: 'resignationTime',
          label: '离职日期',
          formatData: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd');
          },
          minWidth: '100px',
          sortable: 'custom'
        },
        { prop: 'resignationReason', label: '离职原因', minWidth: '100px', sortable: 'custom' },
        { prop: 'status', label: '流程状态', minWidth: '100px', sortable: 'custom' }
      ],
      tableData: [],
      multipleSelection: [],
    };
  },
 
  methods: {
    // 组件选择完后把数据传过来
    selectFun(data) {
      this.multipleSelection = data.backData;
    },
    //表格组件返回排序对象
    sortChange(data) {
      let column = data.backData;
      //排序
      if (column.order) {
        //倒序
        if (column.order === 'descending') {
          // this.query.sortColumn = column.prop + ' ' + 'desc';
        } else {
          // this.query.sortColumn = column.prop;
        }
      } else {
        //不排序
        // this.query.sortColumn = '';
      }
      //请求接口
    },
   
    //分页导航
    pageChange(data) {
      this.pagination = data.backData;
      console.log('pageChange:', this.pagination);
      //分页变化--请求接口
    },  
  }
};
</script>

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图操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 #Javascript
You might like
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php中使用GD库做验证码
2016/03/31 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python 实现多维数组转向量
2019/11/30 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
纬创Java面试题笔试题
2014/10/02 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
学生励志演讲稿
2014/01/06 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
体育口号大全
2014/06/18 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
怎样写观后感
2015/06/19 职场文书
环保守法证明
2015/06/24 职场文书
投诉信范文
2015/07/02 职场文书
三好学生竞选稿范文
2019/08/21 职场文书