当前位置：首页 > VUE

vue遮罩实现

2026-01-13 04:49:57VUE

实现遮罩层的常见方法

在Vue中实现遮罩层可以通过多种方式完成，以下是几种常见的方法：

使用CSS和v-show/v-if控制显示 通过Vue的指令结合CSS样式实现遮罩效果。定义一个遮罩层的div，使用绝对定位覆盖整个视口，背景色设置为半透明。通过v-show或v-if控制遮罩的显示与隐藏。

vue遮罩实现

<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>

结合transition实现动画效果 为遮罩层添加过渡动画，提升用户体验。使用Vue的transition组件包裹遮罩层元素，定义进入和离开的动画效果。

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;
}
.mask {
  /* 同上 */
}
</style>

作为组件封装 将遮罩层封装为可复用的组件，通过props控制显示状态和样式。这种方式适合在多个地方重复使用遮罩层。

<!-- Mask.vue -->
<template>
  <transition name="fade">
    <div 
      class="mask" 
      v-show="visible"
      :style="{ backgroundColor: bgColor }"
    ></div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.5)'
    }
  }
}
</script>

<!-- 使用 -->
<Mask :visible="showMask" bgColor="rgba(0, 0, 0, 0.7)" />

配合弹出层使用 遮罩层常与模态框等组件配合使用。在弹出层组件中同时包含遮罩和内容区域，通过点击遮罩关闭弹出层。

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <div class="modal" v-show="showModal">
      <div class="mask" @click="showModal = false"></div>
      <div class="modal-content">
        <!-- 内容 -->
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}
.modal-content {
  background: white;
  padding: 20px;
  z-index: 1002;
  position: relative;
}
.mask {
  /* 同上 */
}
</style>