Element UI 框架中Loading 区域加载的使用方法

Loading 加载用于加载数据时显示动效

Element UI中的Loading组件默认是全屏显示，大多时候出于美观考虑我们并不需要这种功能　而是让它显示在我们需要的地方，比如一个后台管理系统，我们和后台进行网络传输的时候，我们并不需要把导航栏和系统的头部覆盖住，只需要内容部分显示，这时候我们就需要对组件的参数进行设置。

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上

在某页单独的地方进行设置该组件很容易　直接按照官网实例写即可

但是像之前我们要求的那样，每次和后端的交互都要显示loading框的话，我们通常是把该组件写在封装好的axios.js文件中，这时候就有一个区域显示的问题，我的做法是把系统除了顶部导航和菜单栏之外的内容部分的顶层ＤＩＶ加入一个唯一的class，然后通过对　target　参数的设置　借助　document.querySelector　方法实现区域覆盖。

实现方法

1、创建一个js文件用于设置局部刷新(loading.js)

import Vue from 'vue'
// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading (targetdq) {
  loading = Vue.prototype.$loading({
    lock: true,
    text: '努力加载中...',
    background: 'rgba(255,255,255,.4)',
    target: document.querySelector('.main-container') // 设置加载动画区域
  })
}
function endLoading () {
    loading.close()
}
export function showFullScreenLoading (targetdq) {
  if (needLoadingRequestCount === 0) {
    startLoading(targetdq)
  }
  needLoadingRequestCount++
}
export function hideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}
export default {
  showFullScreenLoading,
  hideFullScreenLoading
}

2、引用并使用

import {showFullScreenLoading,hideFullScreenLoading} from '@/utils/loading'
// ..... 内容 ...
// ..............
 createInit(page,size) {
      showFullScreenLoading() // 开启
      this.pageQuery.page = page
      this.pageQuery.size = size
      //从待办事项的参数控制，通过一些属性控制界面信息
      if(this.isFromTodoWork == 'FromTodoWork_TabName_First'){
        this.fromTodoWork.fromTodoWork_TabName_Current=this.isFromTodoWork
        this.callBack_ByTodoWork_Before()
      }
      clientApi.getClientList(this.pageQuery).then(response => {
        this.clientData = response.data.data
        this.total = response.data.total
        this.list = response.data.data
        hideFullScreenLoading() // 关闭
      }).catch(() => {
        this.$message.error('没有任何数据')
        hideFullScreenLoading()
      })
    }

原文链接：https://blog.csdn.net/qq_28584685/article/details/79472407