vue2.x自定义v-loading指令

（vue3.x自定义v-loading思路类似）

directive.js

import Loading from './loading';
import Vue from 'vue';
const loadingDirective = {
  inserted(el, binding){
        const loading = Vue.extend(Loading);
        el.instance = new loading({
            el: document.createElement("div")
        });
        const title = binding.arg;
        if(typeof title !== "undefined") el.instance.setTitle(title)
        if(binding.value) append(el);
  },
  update(el, binding){
    if(binding.value !== binding.oldValue) binding.value ? append(el) : remove(el);
  }
}

function append(el){
    const style = getComputedStyle(el);
    if(!['absolute', 'relative', 'fixed'].includes(style.position)) el.style.position = 'relative';
    el.appendChild(el.instance.$el);
}

function remove(el){
    el.style.position = '';
    el.removeChild(el.instance.$el);
}

export default loadingDirective;

loading.vue

<template>
  <div class="bn-loading">
    <div class="bn-loading-title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      title: '加载中...'
    }
  },
  methods: {
    setTitle(title){
      this.title = title;
    }
  }
}
</script>

<style lang="scss" scoped>
.bn-loading{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    &-title{
        color: #fff;
        font-size: 18px;
    }
}
</style>

main.js引入

import loadingDirective from "./components/bn-ui/loading/directive";
Vue.directive("load", loadingDirective);

使用

<div class="test-loading" v-load:[loadText]="loading"/>