vue3 页面加载遮挡

在 Vue3 中，可以使用如下方式实现页面加载遮挡：

1. 在 App.vue 组件中定义一个 loading 状态，初始值为 true。

2. 在 mounted 钩子函数中，使用 setTimeout 函数模拟加载时间，将 loading 状态设置为 false。

3. 在模板中使用 v-if 指令判断 loading 状态，如果为 true，则显示一个遮罩层，遮挡整个页面。

下面是示例代码：

<template>
  <div>
    <div v-if="loading" class="loading-mask">
      <div class="loading-spinner"></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  }
};
</script>

<style>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

在上面的示例中，loading-mask 类表示遮罩层，loading-spinner 类表示加载动画。在实际使用中，可以根据需要进行调整。