教你用vue自定义指令做一个组件的遮罩层loading效果

<!-- MaskLayer.vue -->
<template>
  <div v-show="visible" class="mask-layer">
    <div class="loading-spinner">
      <!-- 这里可以放置任何你想要的加载动画 -->
      <span class="spinner"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  /* 自定义加载动画样式 */
}
</style>

// main.js 或其他Vue实例初始化文件
import Vue from 'vue';
import MaskLayer from './components/MaskLayer.vue';

Vue.directive('loading', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    // 创建遮罩层组件实例并挂载到DOM
    const maskLayer = new Vue({
      render: (h) => h(MaskLayer, {
        props: {
          visible: false // 初始状态设置为隐藏
        }
      })
    }).$mount();

    // 将遮罩层添加到目标元素的父级，并设置样式以确保它覆盖目标元素
    el.parentNode.insertBefore(maskLayer.$el, el);

    // 保存遮罩层实例以便后续操作
    el._maskLayer = maskLayer;

    // 根据binding.value的变化控制遮罩层的显示与隐藏
    el._maskLayerVisible = binding.value;

    // 监听binding的变化
    el._maskLayerBinding = binding;
    binding.instance.$watch(binding.expression, function(newVal, oldVal) {
      if (newVal !== oldVal) {
        el._maskLayer.visible = newVal;
      }
    });
  },
  // 当指令从元素上解绑时
  unbind: function (el) {
    // 移除遮罩层
    if (el._maskLayer && el._maskLayer.$el && el._maskLayer.$el.parentNode) {
      el._maskLayer.$el.parentNode.removeChild(el._maskLayer.$el);
    }
  }
});

<!-- MaskLayer.vue -->
<template>
  <div v-if="show" class="mask-layer">
    <!-- 加载动画 -->
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<!-- 样式代码略 -->

// main.js 或其他Vue实例初始化文件
import Vue from 'vue';
import MaskLayer from './components/MaskLayer.vue';

Vue.directive('loading', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el, binding) {
    // 插入遮罩层组件
    const maskLayerComponent = new Vue({
      render(h) {
        return h(MaskLayer, {
          props: {
            show: false
          }
        });
      }
    }).$mount();

    // 插入遮罩层DOM元素
    el.parentNode.insertBefore(maskLayerComponent.$el, el);

    // 在el上设置一个属性来存储遮罩层实例
    el._maskLayer = maskLayerComponent;

    // 初始设置遮罩层显示状态
    update(el, binding);
  },
  // 组件更新
  componentUpdated: function (el, binding) {
    // 更新遮罩层显示状态
    update(el, binding);
  },
  // 当指令从元素上解绑时
  unbind: function (el) {
    // 移除遮罩层
    if (el._maskLayer && el._maskLayer.$el && el._maskLayer.$el.parentNode) {
      el._maskLayer.$el.parentNode.removeChild(el._maskLayer.$el);
    }
  }
});

// 更新遮罩层显示状态的函数
function update(el, binding) {
  if (binding.value) {
    el._maskLayer.show = true;
  } else {
    el._maskLayer.show = false;
  }
}

<template>
  <div>
    <!-- 其他内容 -->

    <!-- 调用自定义指令 -->
    <button @click="toggleLoading">加载数据</button>
    <div v-loading="isLoading">
      <!-- 这里是需要被遮罩层覆盖的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    toggleLoading() {
      this.isLoading = !this.isLoading;
      // 模拟异步加载
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    }
  }
};
</script>

Vue.directive('whr-loading', {
        bind(el, bindingvnode, vnode) {
            let divzhezhao = document.createElement('div')
            divzhezhao.setAttribute('class', 'zhezhao')
            let divbaifenbai = document.createElement('div')
            divbaifenbai.setAttribute('class', 'baifenbai')
            let i = document.createElement('i')
            i.setAttribute('class', 'el-icon-loading')
            divzhezhao.append(divbaifenbai, i)
            el.insertBefore(divzhezhao, el.children[0])
            divzhezhao.setAttribute('style', 'position: absolute;\n' +
                '      width: 100%;\n' +
                '      height: 100%;\n' +
                '      background-color: #0f7188b8;\n' +
                '      text-align: center;\n' +
                '      color:#ffffff96;\n' +
                '      font-size: 12px;')
            divbaifenbai.setAttribute('style','height: 100%;\n' +
                '       width: 0px;\n' +
                '       display: inline-block;\n' +
                '       vertical-align: middle;')
            if (bindingvnode.value == false){
                divzhezhao.style.display = 'none'
            }else {
                divzhezhao.style.display = 'inline'
            }
        },
        update(el, binding, vnode){
            if (binding.value == false){
                el.children[0].style.display = 'none'

            }else {
                el.children[0].style.display = 'inline'
            }
        }
    })