自定义一个loading指令

loading.vue 组件

<template>
  <div class="loading-wrapper">
    <div class="loading-content">
      <p class="title">{
    
    {
    
     title }}</p>
    </div>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
     title: '正在加载中...' };
  }
};
</script>
<style lang="less" scoped>
.loading-wrapper {
    
    
  // width: 100%;
  // height: 100%;
  // background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .loading-content {
    
    
    width: 100%;
    text-align: center;
    .title {
    
    
      line-height: 20px;
      font-size: 12px;
      margin: 0;
    }
  }
}
</style>

loading.js 指令核心代码

import Vue from 'vue';
import MyLoading from './loading.vue';

const myLoading = {
    
    
  inserted(el, binding) {
    
    
    console.log('自定义指令', el, binding);
    const Loading = Vue.extend(MyLoading);
    const loading = new Loading().$mount();
    console.log('loading', loading);
    el.instance = loading;
    if (binding.value) {
    
    
      append(el);
    }
  },
  update(el, binding) {
    
    
    if (binding.value !== binding.oldValue) {
    
    
      binding.value ? append(el) : remove(el);
    }
  }
};
function append(el) {
    
    
  console.log('自定义指令el', el.instance.$el);
  el.appendChild(el.instance.$el);
}
function remove(el) {
    
    
  el.removeChild(el.instance.$el);
}

export default myLoading;

main.js 去注册 注册指令

import myLoading from './view/contact/components/loading.js';
Vue.directive('myLoading', myLoading);