当前位置：首页 > VUE

vue实现全屏遮罩屏

2026-01-21 14:21:10VUE

实现全屏遮罩屏的方法

在Vue中实现全屏遮罩屏可以通过CSS和Vue组件结合完成。遮罩屏通常用于模态框、加载动画或阻止用户与页面交互的场景。

基础CSS样式

创建一个覆盖全屏的固定定位元素，设置较高的z-index确保覆盖其他内容：

vue实现全屏遮罩屏

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

Vue组件实现

创建可复用的遮罩组件，通过props控制显示状态：

vue实现全屏遮罩屏

<template>
  <div v-if="visible" class="mask">
    <slot></slot> <!-- 插槽用于放置加载动画等内容 -->
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

使用遮罩组件

在父组件中控制遮罩的显示隐藏：

<template>
  <div>
    <button @click="showMask = true">显示遮罩</button>
    <Mask :visible="showMask" @click="showMask = false">
      <div class="loading-spinner">加载中...</div>
    </Mask>
  </div>
</template>

<script>
import Mask from './Mask.vue'

export default {
  components: { Mask },
  data() {
    return {
      showMask: false
    }
  }
}
</script>

高级功能扩展

添加动画效果增强用户体验：

.mask {
  /* 原有样式 */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mask-enter-active, .mask-leave-active {
  transition: opacity 0.3s;
}
.mask-enter, .mask-leave-to {
  opacity: 0;
}