当前位置：首页 > VUE

vue 实现遮罩

2026-01-13 02:14:09VUE

Vue 实现遮罩层的方法

基础遮罩实现

通过CSS和Vue的v-show或v-if指令控制遮罩显示。创建一个全屏固定的div作为遮罩层，设置半透明背景色：

<template>
  <div>
    <button @click="showMask = true">显示遮罩</button>
    <div 
      v-show="showMask"
      class="mask"
      @click="showMask = false"
    ></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;
}
</style>

带内容的模态框

在遮罩层上添加内容区域，点击遮罩关闭但点击内容区域不关闭：

<template>
  <div>
    <div 
      v-show="showModal"
      class="mask"
      @click.self="showModal = false"
    >
      <div class="modal-content">
        <h3>模态框标题</h3>
        <p>这里是模态框内容</p>
      </div>
    </div>
  </div>
</template>

<style>
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1000;
}
</style>

动画过渡效果

使用Vue的<transition>组件实现淡入淡出效果：

<transition name="fade">
  <div 
    v-show="showMask"
    class="mask"
  ></div>
</transition>

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

全局遮罩组件

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

<!-- Mask.vue -->
<template>
  <transition name="fade">
    <div 
      v-show="visible"
      class="mask"
      @click="handleClick"
    >
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    closeOnClick: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick() {
      if (this.closeOnClick) {
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>

使用示例

<template>
  <div>
    <button @click="isVisible = true">显示遮罩</button>
    <Mask 
      :visible.sync="isVisible"
      :closeOnClick="true"
    >
      <div class="modal">自定义内容</div>
    </Mask>
  </div>
</template>

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

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

这些方法提供了从基础到高级的遮罩实现方案，可根据具体需求选择合适的实现方式。

vue 实现遮罩