vue3 自定义指令遮罩(自定义布局)

自定义布局 loading.vue

<template>
 <div class="loading">
  <div class="loading-content">
   <div class="SoadMoreUi">
    <div
     :class="['rect' + (index + 1)]"
     v-for="(i, index) in 5"
     :key="index"
     :style="{ background: backgroundColor ? backgroundColor : 'blueviolet' }"
    ></div>
   </div>
  </div>
 </div>
</template>
<script>
import { onMounted, reactive } from "vue";

export default {
 name: 'loading',
 props: {
  backgroundColor: '',
 },
 setup(props, context) {
  let p = {
   title: '正在载入...'
  }
  let data = reactive(p);
  function setTitle(title) {
   this.title = title
  }
  return { data, setTitle }
 },


}
</script>
<style lang="scss" scoped>
.loading {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate3d(-50%, -50%, 0);
 // top: 0;
 background: rgba(114, 110, 110, 0.3);
 overflow: hidden;
 .loading-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .SoadMoreUi {
   // width:50px;
   height: 2.875rem;
   text-align: center;
   font-size: 0.625rem;
  }
  .SoadMoreUi > div {
   height: 100%;
   width: 6px;
   filter: blur(0.0625rem);
   display: inline-block;
   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
   animation: stretchdelay 1.2s infinite ease-in-out;
  }

  .SoadMoreUi .rect2 {
   -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
  }

  .SoadMoreUi .rect3 {
   -webkit-animation-delay: -1s;
   animation-delay: -1s;
  }

  .SoadMoreUi .rect4 {
   -webkit-animation-delay: -0.9s;
   animation-delay: -0.9s;
  }

  .SoadMoreUi .rect5 {
   -webkit-animation-delay: -0.8s;
   animation-delay: -0.8s;
  }
 }
}
@-webkit-keyframes stretchdelay {
 0%,
 40%,
 100% {
  -webkit-transform: scaleY(0.4);
 }
 20% {
  -webkit-transform: scaleY(1);
 }
}

@keyframes stretchdelay {
 0%,
 40%,
 100% {
  transform: scaleY(0.4);
  -webkit-transform: scaleY(0.4);
 }
 20% {
  transform: scaleY(1);
  -webkit-transform: scaleY(1);
 }
}
</style>

create-loading-like-directive.js

import { createApp } from 'vue'
import { addClass, removeClass } from './operationClass'
const relativeCls = 'g-relative'
export default function createLoadingLikeDirective(Comp) {
 return {
  mounted(el, binding) {
   const app = createApp(Comp)
   const instance = app.mount(document.createElement('div'))
   const name = Comp.name
   if (!el[name]) {
    el[name] = {}
   }
   el[name].instance = instance
   const title = binding.arg
   if (typeof title !== 'undefined') {
    instance.setTitle(title)
   }
   if (binding.value) {
    append(el)
   }

  },
  updated(el, binding) {
   if (binding.value) {
    el.style.position = 'relative'
    el.style.overflow = 'hidden'
   } else {
    el.style.overflow = 'auto'
   }
   const title = binding.arg
   const name = Comp.name
   if (typeof title !== 'undefined') {
    el[name].instance.setTitle(title)
   }
   if (binding.value !== binding.oldValue) {
    binding.value ? append(el) : remove(el)
   }
  }
 }
 function append(el) {
  const name = Comp.name
  const style = getComputedStyle(el)
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
   addClass(el, relativeCls)
  }
  el.appendChild(el[name].instance.$el)
 }

 function remove(el) {
  const name = Comp.name
  removeClass(el, relativeCls)
  el.removeChild(el[name].instance.$el)
 }
}

MaskLayer.js

import Loading from './loading.vue'
import createLoadingLikeDirective from './create-loading-like-directive'
const loadingDirective = createLoadingLikeDirective(Loading)
export default loadingDirective

operationClass.js

export function addClass(el, className) {
 if (!el.classList.contains(className)) {
  el.classList.add(className)
 }
}
export function removeClass(el, className) {
 el.classList.remove(className)
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
//自定义指令遮罩
import loadingDirective from './directive/loading/MaskLayer'
const app = createApp(App)
app.directive('loading', loadingDirective)
app.mount('#app')