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

 <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图效果

补充知识: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图操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • vue element后台鉴权流程分析

    前言: 最近项目遇到一个管理系统,感觉权限配置挺有意思,记录一下流程实现的过程,便于自己学习以及整理思路,部分思路整合在代码的注释中: 路由拦截鉴权常用的两种方法 1:路由拦截:单纯给路由加字段标识符,通过路由拦截实现 2:动态路由:第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置 比较: 路由拦截实现方式比较简单,只需要简单的在router.beforeEach中根据路由配置信息过滤页面是否有权限前往改组件,若相对于的权限不够则不前往相应的组件 动态路由实现相对比较复杂,并且需要后

  • element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

    突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了. 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了.建好之后,直接开始安装吧 npm i element-plus 为了方便,直接采取全部引入的方式 src/plugins/element.ts import ElementPlus from 'element-plus' imp

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • VUE-ElementUI 自定义Loading图操作

    需求: element ui loading图只能使用自己的loading图, 但很多场景下,需要替换成自己的gif图 虽然文档中有些, element-loading-spinner="el-icon-loading" 可指定自定义图 但经测试,也只是只能再elementui 图标库中的图, 不是我们想的那个自定义图类的意思. 自定义图方法: 1) 添加自定义elementUI loading样式 asserts下 新建CSS文件夹 及CSS文件比如myCss.css 再里面,写入自

  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • vue+rem自定义轮播图效果

    使用vue+rem自定义轮播图的实现,供大家参考,具体内容如下 单位使用rem进行页面布局,在动态计算轮播图整体宽度时,需要把px转换成rem,挺麻烦的. 效果如下:如果当前图片不是第一张和最后一张,刚好可以看到当前图片上一张和下一张的一部分. 具体代码如下 <template> <div class="constructionUp"> <div class="pub-hd"> <h2>施工升级包</h2>

  • lottie实现vue自定义loading指令及常用指令封装详解

    目录 一.前言 二.实现方式 1.v-loading 2.v-click-outside 三.后记 一.前言 本文主要介绍使用lottie动画实现vue自定义loading的指令方法.另外本篇文章还会介绍其他几个常用的自定义指令实现方式(点击指定区域外监听指令). lottie是一款由airbnb开源的跨平台动画渲染库,支持Android,iOS,Web,Windows平台.是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件,直接渲染动画

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • VUE+elementui组件在table-cell单元格中绘制微型echarts图

    需求效果图示例 实际完成效果图 ** 代码实现 注:table表格为二次封装的子组件 -在table表格中 根据 scope.$index动态设置元素的id ,便于指定单元格的echarts初始化: -在单元格中触发一个方法,传入当前的scope.row数据或者指定其他数据,并且传入 scope.$index 以及一个字符串便于识别当前是哪条数据的charts -在方法中绘制echarts** <el-table-column align="center"> <tem

  • Vue element-ui父组件控制子组件的表单校验操作

    方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保 存</el-button> </div> </template> <

  • vue+ElementUI 关闭对话框清空验证,清除form表单的操作

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来) <div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGr

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

    vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义的指令. 方法一. 组件内代码如下: directives: { title: { inserted(el) { const { clientWidth, scrollWidth, title } = el; if (!title && scrollWidth > clientWidth) el.title = el.innerText; } } }, 使用: <artic

随机推荐