当前位置：首页 > VUE

vue实现全屏遮罩屏

2026-02-22 05:43:27VUE

Vue 实现全屏遮罩屏的方法

使用 CSS 和 Vue 动态控制

创建一个全屏遮罩组件，通过 Vue 的 v-if 或 v-show 控制显示隐藏。遮罩样式需固定定位并覆盖全屏。

vue实现全屏遮罩屏

<template>
  <div class="mask" v-show="isVisible" @click="handleClick"></div>
</template>

<script>
export default {
  props: {
    isVisible: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>

通过 Vue Teleport 挂载遮罩

使用 Vue 3 的 <teleport> 将遮罩挂载到 body 下，避免父组件样式干扰。

vue实现全屏遮罩屏

<template>
  <teleport to="body">
    <div class="mask" v-if="show" @click.self="close"></div>
  </teleport>
</template>

<script>
export default {
  data() {
    return { show: false };
  },
  methods: {
    close() {
      this.show = false;
    }
  }
};
</script>

结合 Transition 添加动画效果

为遮罩添加淡入淡出动画，增强用户体验。

<template>
  <transition name="fade">
    <div class="mask" v-show="visible" @click="hide"></div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库（如 vue-overlay）

对于复杂需求，可使用专门的全屏遮罩库简化开发。

npm install vue-overlay

<template>
  <overlay v-model="isOpen" @click="isOpen = false" />
</template>

<script>
import { Overlay } from 'vue-overlay';
export default {
  components: { Overlay },
  data: () => ({ isOpen: true })
};
</script>