vue 全局自定义指令(loading)

注册

在 main.js 文件中 导入封装好的 loading 方法对象
使用 Vue.directive('loading', loadingDirective) 注册全局指令

封装 Loading 指令

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

const loadingRelative = 'loading-relative'

const loadingDirective = {
  inserted (el, binding) {
    const loadingCla = vue.extend(loading) // 在vue 中创建子类
    // eslint-disable-next-line new-cap
    const instance = new loadingCla().$mount()
    el.instance = instance
    const text = binding.arg
    if (typeof text !== 'undefined') {
      instance.setTitle(text)
    }
    if (binding.value) append(el)
  },
  update (el, binding) {
    const text = binding.arg
    if (typeof text !== 'undefined') {
      el.instance.setTitle(text)
    }
    if (binding.value !== binding.oldValue) { // loading 节点
      binding.value ? append(el) : remove(el)
    }
  }