Use slot solt to achieve dust loading effect Vue

effect:

The role of the slot:

Define a child component named child, add content for the child component should be defined in the template of the child component, the content defined directly in the label of the parent component will not be rendered, as follows

Function : The function is that the two interfaces in HTML display small components when loading, and there is a dust-covering effect, which is mainly realized by the <slot> tag

Code:

App.vue code : call component

<template>
  <div id="app">
    <div style="width:1080px; margin:0 auto">
      <Modal>
        <Center>
          <!-- 插槽：居中 -->
          <Loading />
        </Center>
      </Modal>
    </div>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
import Center from "@/components/Center.vue";
import Modal from "@/components/Modal.vue";
export default {
     
     
  components: {
     
     
    Loading,
    Center,
    Modal,
  },
};
</script>

Modal.vue code : dust effect

<template>
    <div class="modal"><!-- 蒙尘效果 -->
        <slot></slot>
    </div>
</template>

<style scoped>
.modal {
     
     
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
}
</style>

Loading.vue : Mainly load the dynamic loading effect of five vertical lines

<template>
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script>
export default {
     
     };
</script>


<style scoped>
.loading {
     
     
  height: 40px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
}
.loading span {
     
     
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  animation: load 1s ease infinite;
  margin: 0 2px;
}
@keyframes load {
     
     
  0%,
  100% {
     
     
    transform: scaleY(1.5);/* 拉伸1.5倍 */
    background: lightgreen;
  }
  50% {
     
     
    transform: scaleY(1);
    background: lightblue;
  }
}
.loading span:nth-child(2) {
     
     
  animation-delay: 0.2s; /*设置延时时间 */
}
.loading span:nth-child(3) {
     
     
  animation-delay: 0.4s;
}
.loading span:nth-child(4) {
     
     
  animation-delay: 0.6s;
}
.loading span:nth-child(5) {
     
     
  animation-delay: 0.8s;
}
</style>

Center.vue : center dynamic loading

<template>
    <div class="center">
        <!-- 模板中的某个位置，无法确定位置 -->
        <!-- 使用插槽 
        -->
        <slot></slot>
    </div>
</template>

<style scoped>
.center {
     
     
    position: fixed;/* 相对浏览器窗口定位 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>

Project structure: