手写全屏加载遮罩

<!-- 全屏加载遮罩 -->
<button @click="onSubmit">点击</button>
<div v-if="isLoading" class="fullscreen-mask">
    <div class="loading-content">
        <div class="small-spinner"></div>
        <p class="loading-text">加载中，请稍候...</p>
    </div>
</div>

data() {
    return {
        isLoading: false,
    }
}
methods:{
    onSubmit(){
        // 开始请求前显示加载动画
        this.isLoading = true;
        this.$post('app').then((res) => {
          let { msg, success } = res.data
          if (!success) {
            this.$message.error(msg);
            return
          }
          if (success) {
          // 无论成功或失败，请求完成后隐藏加载动画
          this.isLoading = false;

          }
          this.$message.success('关闭成功');
        })
    }
}
                            
<style scoped>
/* 全屏遮罩层 */
.fullscreen-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;
  z-index: 9999; /* 确保在最上层 */
}

/* 加载内容容器 */
.loading-content {
  text-align: center;
}

/* 小型转圈图标 */
.small-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

/* 加载文字 */
.loading-text {
  color: white;
  margin-top: 16px;
  font-size: 16px;
}

/* 旋转动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>