vue如何自定義加載指令

本文小編為大家詳細介紹“vue如何自定義加載指令”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue如何自定義加載指令”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

前言

用過element-ui的都應該知道，里面有一個loading組件，有兩種調用方法：指令和服務。但是只有一種加載效果，為了豐富加載效果和方便使用，于是寫了一個自定義loading指令。

創建加載組件

首先，需要創建loading組件，展示需要的加載效果，因人而異，不再贅述。

創建指令

指令文件

首先，創建一個js文件用于書寫自定義指令，在這個文件中導入Vue和loading組件:

import Vue from 'vue'
import loading from './loading.vue'

創建構造器

主要是使用Vue.extend構造器，可以簡單的理解為傳入一個組件作為參數，然后返回該組件的類，可以使用這個類new出實例。

// loading組件作為參數傳入
const loadingConstructor = Vue.extend(loading)

書寫指令

在此之前，設定好指令的參數，在本人的項目中，參數有兩種方式：1.傳入一個布爾值，代表是否開啟加載；2.傳入一個對象，對象中包含是否開啟遮罩、提示文字、加載背景顏色等屬性，方便開發時，高度自定義laoding。
指令的觸發主要是在update中，該屬性可接收一個函數，每次指令的參數改變時都會觸發該函數，就是在這里判斷開啟或者關閉加載效果。 整體代碼如下，附有詳細注釋：

const loadingDirective = Vue => {
  Vue.directive('custLoading', {
    /**
     * binding:
     * 1.可傳單個參數，為布爾值；
     * 2.也可用json傳多個參數{ loading, tip, background }
     *  2.1 loading { boolean } 是否開啟遮罩
     *  2.2 tip { string } 提示文字
     *  2.3 background { string } 加載背景顏色
     * */
    // update: 參數變化時觸發
    update: function (el, binding, vnode) {
      const value = binding.value
      let backup = {}
      // 判斷參數類型，將參數都轉換為對象，方便后續統一處理
      typeof value === 'boolean' ? (backup.loading = value) : (backup = value || {})
      // 取出所有的參數
      const { loading, tip, background } = backup
      // 根據loading參數判斷開啟或者關閉加載效果，開啟和關閉函數后續會講到
      loading ? createLoading(el, tip, background) : close(el?.customLoadingInstance?.$el)
    },
    // unbid: 指令卸載時觸發
    unbind: function (el, binding) {
      const { loading } = binding.value || {}
      // 如果還在展示加載特效，則關閉
      loading && close(el?.customLoadingInstance?.$el)
    }
  })
}
export default loadingDirective

開啟函數

在上面的指令中，當開啟的參數為true時，回會調用一個createLoading函數用于將加載效果加入到指令掛載的元素上，具體思路如下：
1.在調用時，我們傳入了三個參數給它，分別是掛載有自定義加載指令的元素、加載時的提示、加載背景顏色，詳細可見上面的指令代碼。
2.在執行之前，還需要進行判斷當前的Vue實例是否運行在服務器上，如果是，此時不需要將加載效果展示出來；或者該元素之前是否已經帶有加載特效，如果是的話，沒必要在開啟一次，不然到時會出現多層加載效果，既多余，又讓頁面顯得混亂。
3.判斷需要使用加載效果的元素是否還存在，不存在，則掛載到#main或者document.body上。
4.判斷元素上是否存在定位或者其他條件，在本人的項目中，使用絕對定位來使加載效果鋪滿元素，因此需要進行判斷，如果沒有定位，則加上relative。
5.使用loadingConstructor，創建loading實例，將實例作為子元素通過appendChild，放進需要展示的元素中，就可以展示出來；同時，在展示的元素上增加一個屬性customLoadingInstance，用于記錄當前的loading實例，方便后續的銷毀。
整體代碼如下：

const createLoading = (target, tip= '加載中,請稍候...', background) => {
  // 判斷是否允許開啟加載特效
  if (Vue.prototype.$isServer || target?.customLoadingInstance) return
  const mainEL = document.querySelector('#main')
  // 判斷展示加載效果的元素是否存在
  const parentNode = target || mainEL || document.body
  // 判斷父級是否存在定位，沒有則添加定位
  const position = getComputedStyle(parentNode)?.position
  (!position || position === 'static') && (parentNode.style.position = 'relative')
  // 創建loading實例
  const instance = new loadingConstructor({
    el: document.createElement('div'),
    data: { background, tip, parentNodeWidth: parentNode.clientWidth, isShow: true }
  })
  // 注意：loading實例是一個Vue組件對象，真正的DOM放在實例的$el屬性上
  parentNode.appendChild(instance.$el)
  parentNode.customLoadingInstance = instance
  
  return instance
}

關閉函數

有開啟就得有結束，當開啟的參數為false時，關閉加載效果。該函數接收loading實例的$el，其實就是加載效果的DOM元素，思路如下：
1.為了使加載組件看起來是逐漸消失的，不得在第一時間將加載效果的DOM元素刪除，而是給它添加一個逐漸消失的動畫，通過一個class設定。
2.設定動畫消失時間，由loading組件內部實現在規定時間內，將整個加載效果執行完成或者淡出頁面。也可省略此步驟，直接就將其移除。 之所以加入這個效果，是為了用戶視覺上感受更好。
3.創建定時器，用于在加載效果消失時，刪除加載效果的DOM元素。同2，也可直接移除。

const close = (target) => {
  if (!target) return
  // 添加逐漸消失的class
  target.className += ' custom-loading-disappear'
  // 獲取loading實例
  const instance = target?.parentNode?.customLoadingInstance
  //  設定消失時間。
  instance?.$data?.dur && (instance.$data.dur = 0.8)
  // 設定定時器，用于在加載效果消失時，刪除加載效果的`DOM`元素。
  let timer = setTimeout(() => {
    if (target && target.parentNode) {
      // 將customLoadingInstance 屬性置為null，才不會干擾下一次開啟
      target.parentNode.customLoadingInstance = null
      // 將加載效果的DOM元素移除
      target.parentNode.removeChild(target)
    }
    clearTimeout(timer)
    timer = null
  }, 1100)
}

讀到這里，這篇“vue如何自定義加載指令”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。