Vue element-ui 使用Loading服务按需引入的坑

前言

因为开发组件，需要按需引入element-ui的组件，但是v-loading如果按需引入就需要使用element-ui提供的Loading服务来实现，具体属性和用法可以到官网查看，本文记录一下自己使用过程中的一个坑。

简单使用

全屏加载的方式很简单，不需要参数即可实现，这里讲一下局部加载loading时的简单用法

<template>
  <div class="component">
    <div class="header">header</div>
    <div class="main">
      <div class="content1">content1</div>
      <div class="content2">content2</div>
    </div>
    <div class="footer">footer</div>
  </div>
</template>

<script>
// 引入Loading
import { Loading } from 'element-ui'
export default {
  data() {
    return {
      loading: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取接口数据
    getData() {
      // 在需要加载的时候使用如下方法，如果不需要频繁加载，直接写到mounted钩子函数即可
      this.loading && this.loading.close() // 这里是为了防止还没有请求结束（loading未关闭）再次连续触发
      this.loading = Loading.service({
        // 这里可以直接使用选择器名称，当然也可以用ref获取DOM结构，可以提前把DOM结构缓存起来，这样频繁被触发的时候是不是就不会重新获取DOM了呢？好像可以提升一丢丢性能吧（个人理解）
        target: '.content2' 
      })
      // 获取数据的接口
      getData().then(res => {
        // 关闭loading
        this.loading.close()
      })
    }
  }
}
</script>

<style lang="less">
.component{
  // 这里需要给局部加载loading的地方添加相对定位
  .content2{
    position: relative;
  }
}
<style>

这里的重点其实是需要给局部加载的元素添加相对定位，因为初次加载不会出现问题，但是当你把网速放慢，频繁获取数据时就会出现loading定位不准的情况，通常是被定位到了自己的上层有定位的父元素（绝对定位的知识）