vue3使用bootstrap的简单加载遮罩层

之前有使用过bootstrap做过一个简单的加载遮罩层，现把它加入到vue中。

加载遮罩层一般来讲整个app共用一个就可以，因此放到App.vue中，为不影响其它的业务逻辑，放到</template>标签前面

<script setup>
import "bootstrap/dist/css/bootstrap.min.css";
import { store } from "./utils/store.js";
</script>
<template>
    ...

  <div class="modal fade" tabindex="-1" :class="{ show: store.isLoading, 'd-block': store.isLoading }">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="border: none; background-color: transparent">
        <div class="spinner-border text-light mx-auto" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  </div>
  <div v-if="store.isLoading" class="modal-backdrop fade show"></div>
</template>

新建utils/store.js

import { reactive } from "vue";

export const store = reactive({
  isLoading: false,
  updateLoadingStatue(status) {
    this.isLoading = status;
  },
});

 使用的地方，比如说pages/Home.vue

<script setup>
import { store } from "../utils/store.js";

setTimeout(() => {
  store.updateLoadingStatue(true);
}, 2000);

setTimeout(() => {
  store.updateLoadingStatue(false);
}, 4000);
</script>
<template>
  <div class="about">
    <h1>This is home page</h1>
  </div>
</template>