vue 增加loading指令

在開發項目的時候發現為了提高交互上的體驗，需要加一個loading效果，為了請求接口數據響應過慢。在沒有引用其他ui框架的情況下自己寫一個指令。

首先創建文件夾如下：

images文件夾里面就一個隨便適合的gif圖片，這個可以找ui幫忙解決，或者自己去找找素材。

loading.vue里面的內容

<template>
  <div v-show="visible" class="loading-wrap">
    <div class="loading-box">
      <img src="./images/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name: "loading",
    data() {
      return {
        visible: false
      }
    }
  }
</script>
<style scoped lang="scss">
  .loading-box {
    position: absolute;
    left: 50%;
    top: 40%;
    height: 60px;
    width: 60px;
    margin-left: -30px;
    z-index: 2000;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>

　　

很簡單，就一個ui樣式，加一個顯示隱藏

下面是index.js

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

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      // 控制loading組件顯示
      el.instance.visible = true
      // 插入到目標元素
      insertDom(el, el, binding)
    })
  } else {
    el.instance.visible = false
  }
}

const insertDom = (parent, el) => {
  parent.appendChild(el.mask)
}

export default {
  bind: function (el, binding, vnode) {
    const mask = new Mask({
      el: document.createElement('div'),
      data () {}
    })
    el.instance = mask
    el.mask = mask.$el
    el.maskStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  unbind: function (el, binding) {
    el.instance && el.instance.$destroy()
  }
}

接下去在想用的地方加一個 v-loading="isLoading" 指令就行， isLoading 是各自頁面控制顯示隱藏的參數

哦，別忘了在main.js注冊一個指令全局

// 注冊自定義指令
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

 

其實這個指令的方法是參考餓了么里面的loading方法寫出來的，還希望有優化的地方請指教。