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定位不准的情況，通常是被定位到了自己的上層有定位的父元素（絕對定位的知識）