vue遮罩层如何实现
实现 Vue 遮罩层的方法
使用 CSS 和 Vue 指令
通过 Vue 的 v-show 或 v-if 控制遮罩层的显示与隐藏。定义一个全屏固定的 div，设置背景色和透明度，通过数据绑定动态切换。
<template>
<div>
<button @click="showMask = !showMask">切换遮罩</button>
<div class="mask" v-show="showMask"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false
};
}
};
</script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
</style>结合弹窗组件
遮罩层常与弹窗配合使用。在弹窗组件外层包裹遮罩层，通过 props 控制显示状态。
<template>
<div class="modal">
<div class="mask" v-if="visible"></div>
<div class="modal-content" v-if="visible">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
visible: Boolean
}
};
</script>使用第三方库
例如 element-ui 的 Dialog 组件自带遮罩层，直接调用即可。
<template>
<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog :visible.sync="dialogVisible" title="提示">
<span>内容</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
}
};
</script>动画效果增强 通过 Vue 的过渡类名或 CSS 动画为遮罩层添加渐隐渐现效果。
<template>
<transition name="fade">
<div class="mask" v-if="showMask"></div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>注意事项
- 遮罩层的
z-index需高于页面其他元素，但低于弹窗内容。 - 移动端需考虑阻止背景滚动，可通过
document.body.style.overflow = 'hidden'实现。 - 遮罩层点击关闭功能可通过
@click.self="showMask = false"实现。
