vue遮罩层实现原理
Vue遮罩层实现原理
遮罩层（Overlay/Mask）是前端常见的UI组件，用于覆盖页面内容并阻止用户交互，通常配合弹窗、下拉菜单等使用。Vue中实现遮罩层主要依赖以下核心机制：
定位与层级控制
遮罩层通常使用position: fixed或position: absolute定位，并通过z-index确保覆盖其他元素。基础CSS示例：
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}事件阻止与穿透
通过@click.stop修饰符阻止事件冒泡，或动态控制pointer-events属性：
<div class="mask" @click.self="closeMask">
<div class="content" @click.stop></div>
</div>动态渲染控制
使用Vue的v-if或v-show控制遮罩显隐，结合响应式数据：
export default {
data() {
return {
showMask: false
}
},
methods: {
toggleMask() {
this.showMask = !this.showMask;
}
}
}动画过渡效果
通过Vue的<transition>组件实现渐显/渐隐动画：
<transition name="fade">
<div class="mask" v-if="showMask"></div>
</transition>对应CSS动画：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}滚动锁定
遮罩出现时需禁用页面滚动，可通过监听状态变化操作body样式：
watch: {
showMask(newVal) {
document.body.style.overflow = newVal ? 'hidden' : '';
}
}组件化实现
推荐将遮封装为可复用组件，通过props控制行为：
// Mask.vue
props: {
visible: Boolean,
clickClose: { type: Boolean, default: true }
},
emits: ['update:visible']实际应用时，可通过Teleport挂载到特定DOM节点避免层级问题：
<teleport to="body">
<mask-layer v-model="show" />
</teleport>
