vue 全局自定义指令(loading)_el.instance

注册

在 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)
    }
  }
}
 
const append = (el) => {
  const style = getComputedStyle(el)
  if (!['absolute', 'fixed', 'relative'].includes(style.position)) { // loading组件
  使用 position， 判断父级 position
    addClass(el, loadingRelative)
  }
  el.appendChild(el.instance.$el)
}
 
const remove = (el) => {
  removeClass(el, loadingRelative)
  el.removeChild(el.instance.$el)
}
 
const addClass = (el, className) => {
  if (!el.classList.contains(className)) {
    el.classList.add(className)
  }
}
 
const removeClass = (el, className) => {
  el.classList.remove(className)
}
 
export default loadingDirective

loading 组件

<template lang='pug'>
  .loading
    .loading-content
      Icon(type="load-c" class='ip-loading-icon')
      .desc {{ text }}
</template>
 
<script>
export default {
  data () {
    return {
      text: '加载中...'
    }
  },
  methods: {
    setTitle (text) {
      this.text = text
    }
  }
}
</script>
<style lang='less' scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .loading-content {
    text-align: center;
    color: @ip-font-color-text;;
    .desc {
      line-height: 20px;
    }
  }
}
.loading-relative {
  position: relative;
}
</style>

使用

在元素上 v-loading:[text]='finshed'
[text] 传入 Loading title