vue实现自定义v-loading指令

实现dom节点的局部loading效果，效果如element-ui的v-loading。

实现代码：

loading.js,其中@/components/loadingComponent/index.vue为自定义的一个loading组件，可自行实现。

import Vue from 'vue'
import loading from '@/components/loadingComponent/index.vue'

const LoadingComponents = Vue.extend(loading)

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

const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      el.instance.visible = true
      insertDom(el, el, binding)
    })
  } else {
    el.instance.visible = false
  }
}

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

全局注册，如果要覆盖掉element-ui的v-loading需要在引入element-ui后面，即Vue.use(ElementUI)后再注册自定义的loading指令

import loading from './loading'

Vue.directive('loading', loading)

使用loading指令

  <div id="app" v-loading="loading">
  </div>