elementui全局设置loading效果

我们在使用elementui时查询时常会用到loading的效果，基本的使用方法官方已经给出，直接再需要展示loading效果的地方设置v-loading=‘loading’，然后我们不断切换loading的值就可以实现loading的显示隐藏了。

<el-table
    v-loading="loading"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
  </el-table>

但是，当很多地方需要设置loading效果时，这样做就会很麻烦，需要写大量重复的代码。实际上官方还给出了另一种设置的方式：Loading 还可以以服务的方式调用。

首先再main.js引入

import { Loading } from 'element-ui';

然后同样再这里我们设置个全局的方法来调用生成loading

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '加载中',                         // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.8)',       // 背景颜色
    target: '.el-table, .table-flex, .region',       // **需要遮罩的区域，这里写要添加loading的选择器**
    fullscreen: false,
    customClass: 'loadingclass'             // **遮罩层新增类名，如果需要修改loading的样式**
  })
  setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close();                        // 关闭遮罩层
  },5000)
  return loading;
}

这样我们在使用loading的时候调用openLoading就行了

//组件内
getlist() {
	//创建loading对象开始遮罩
	const rLoading = this.openLoading();
	//发送请求
	query().then(res => {
		//请求结束关闭loading
		rLoading.close();
	})
}

这样使用起来就很简单了，不用每次设置v-loading，还要想很多的变量来修改值。
关于设置loading的样式：customClass: ‘loadingclass’，再app.vue中添加一下这个class去改loading的样式就好了。

<style lang="scss">
  .loadingclass {
    .el-loading-spinner {
      i {
        color: #139cb6;
      }
      .el-loading-text {
        color: #139cb6;
      }
    }
  }
</style>