ダストソルト効果を実現するためにスロットソルトを使用する

効果：

スロットの役割：

次のように、childという名前の子コンポーネントを定義し、子コンポーネントのコンテンツを子コンポーネントのテンプレートで定義する必要があります。親コンポーネントのラベルで直接定義されたコンテンツはレンダリングされません。

機能：この機能は、HTMLの2つのインターフェースがロード時に小さなコンポーネントを表示することであり、ダストカバー効果があります。これは主に<slot>タグによって実現されます

コード：

App.vueコード：呼び出しコンポーネント

<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コード：ダスト効果

<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：主に5つの垂直線の動的負荷効果を読み込みます

<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：センター動的読み込み

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

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

プロジェクトの構造：