vue实现全局遮罩层
实现全局遮罩层的几种方法
在Vue中实现全局遮罩层可以通过多种方式，以下是几种常见的方法：
使用Vue组件和状态管理
创建一个遮罩层组件，通过Vuex或Pinia管理其显示状态。
<template>
<div v-if="show" class="global-mask">
<!-- 遮罩层内容 -->
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showMask() {
this.show = true
},
hideMask() {
this.show = false
}
}
}
</script>
<style>
.global-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
</style>使用Vue插件方式
创建一个Vue插件，通过全局方法控制遮罩层。
const MaskPlugin = {
install(Vue) {
const MaskComponent = Vue.extend({
template: '<div v-show="show" class="global-mask"></div>',
data() {
return { show: false }
}
})
const mask = new MaskComponent().$mount()
document.body.appendChild(mask.$el)
Vue.prototype.$mask = {
show: () => mask.show = true,
hide: () => mask.show = false
}
}
}
Vue.use(MaskPlugin)使用Teleport组件（Vue 3）
Vue 3的Teleport组件可以方便地将遮罩层渲染到body下。
<template>
<teleport to="body">
<div v-if="show" class="global-mask"></div>
</teleport>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>使用CSS和JavaScript动态控制
通过纯CSS和JavaScript动态添加/移除遮罩层元素。
function createGlobalMask() {
const mask = document.createElement('div')
mask.className = 'global-mask'
document.body.appendChild(mask)
return {
show: () => mask.style.display = 'block',
hide: () => mask.style.display = 'none'
}
}
const mask = createGlobalMask()遮罩层的样式优化
为了确保遮罩层覆盖整个视窗并位于最上层：
.global-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none; /* 默认隐藏 */
}遮罩层的交互处理
可以添加点击事件来关闭遮罩层：
<template>
<div
v-if="show"
class="global-mask"
@click="hide"
></div>
</template>性能考虑
频繁创建和销毁遮罩层可能影响性能，建议：
- 使用v-show代替v-if保持DOM存在
- 避免在遮罩层上使用复杂的动画
- 对于SPA应用，在App.vue中声明全局遮罩层
