vue 实现遮罩
实现遮罩的方法
在Vue中实现遮罩效果通常涉及创建一个半透明的覆盖层，用于阻止用户与底层内容交互。以下是几种常见的方法：
使用CSS和Vue指令
通过Vue的v-show或v-if指令控制遮罩的显示与隐藏，结合CSS实现样式。
<template>
<div>
<button @click="showMask = !showMask">切换遮罩</button>
<div class="mask" v-show="showMask"></div>
<div class="content">页面内容</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: 999;
}
.content {
position: relative;
z-index: 1;
}
</style>使用Vue过渡动画
为遮罩添加显示/隐藏的过渡效果，提升用户体验。
<template>
<div>
<button @click="showMask = !showMask">切换遮罩</button>
<transition name="fade">
<div class="mask" v-show="showMask"></div>
</transition>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>封装为可复用组件
将遮罩逻辑封装为组件，方便在多个地方复用。
<!-- Mask.vue -->
<template>
<transition name="fade">
<div class="mask" v-show="show" @click="onClick"></div>
</transition>
</template>
<script>
export default {
props: {
show: Boolean
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>结合第三方库
使用像vodal这样的第三方库快速实现带遮罩的弹窗。
import Vodal from 'vodal';
import 'vodal/common.css';
import 'vodal/rotate.css';
export default {
components: {
Vodal
},
data() {
return {
show: false
}
}
}<vodal :show="show" animation="rotate" @hide="show = false">
弹窗内容
</vodal>注意事项
- 遮罩的
z-index需要高于页面内容但低于弹窗内容 - 移动端需要考虑防止背景滚动的问题
- 遮罩点击关闭功能需要根据业务需求实现
- 性能优化：频繁切换显示时建议使用
v-show而非v-if
以上方法可以根据具体需求选择或组合使用，实现不同场景下的遮罩效果。
