66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 路由切换遮罩层
|
|
*
|
|
* 路由开始切换时淡入覆盖旧页面（半透明 + 模糊 + loading），
|
|
* 切换完成后淡出露出新页面。由 stores/progress.ts 的 visible 驱动，
|
|
* 与顶部 RouteProgress 同步显隐。
|
|
*
|
|
* 视觉效果：旧页面被遮罩"盖住"→ 新页面就位 → 遮罩淡出揭开
|
|
*/
|
|
import { useProgressStore } from '@/stores/progress'
|
|
|
|
const progressStore = useProgressStore()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-mask" :class="{ show: progressStore.visible }">
|
|
<div class="page-mask-content">
|
|
<el-icon class="page-mask-icon is-loading"><Loading /></el-icon>
|
|
<span class="page-mask-text">加载中</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.page-mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// 半透明白色 + 背景模糊，营造"遮罩旧页面"效果
|
|
background: rgba(255, 255, 255, 0.65);
|
|
backdrop-filter: blur(3px);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
|
pointer-events: none;
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
// 加载期间拦截点击，防止误操作
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.page-mask-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.page-mask-icon {
|
|
font-size: 32px;
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.page-mask-text {
|
|
font-size: 13px;
|
|
}
|
|
</style>
|