vue实现全屏遮罩屏
实现全屏遮罩屏的方法
在Vue中实现全屏遮罩屏可以通过CSS和Vue组件结合完成。遮罩屏通常用于模态框、加载动画或阻止用户与页面交互的场景。
基础CSS样式
创建一个覆盖全屏的固定定位元素，设置较高的z-index确保覆盖其他内容：
.mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}Vue组件实现
创建可复用的遮罩组件，通过props控制显示状态：
<template>
<div v-if="visible" class="mask">
<slot></slot> <!-- 插槽用于放置加载动画等内容 -->
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
}
}
</script>使用遮罩组件
在父组件中控制遮罩的显示隐藏：
<template>
<div>
<button @click="showMask = true">显示遮罩</button>
<Mask :visible="showMask" @click="showMask = false">
<div class="loading-spinner">加载中...</div>
</Mask>
</div>
</template>
<script>
import Mask from './Mask.vue'
export default {
components: { Mask },
data() {
return {
showMask: false
}
}
}
</script>高级功能扩展
添加动画效果增强用户体验：
.mask {
/* 原有样式 */
opacity: 0;
transition: opacity 0.3s ease;
}
.mask-enter-active, .mask-leave-active {
transition: opacity 0.3s;
}
.mask-enter, .mask-leave-to {
opacity: 0;
}注意事项
- 确保遮罩的z-index高于页面其他元素
- 移动端需考虑viewport单位兼容性
- 如需阻止滚动，需额外添加
document.body.style.overflow = 'hidden' - 性能优化：避免频繁切换遮罩状态
