当前位置：首页 > VUE

vue实现组件遮罩层

2026-02-22 06:19:46VUE

Vue 实现组件遮罩层的方法

在 Vue 中实现遮罩层通常需要结合 CSS 和 Vue 的动态渲染能力。以下是几种常见的实现方式：

vue实现组件遮罩层

使用 v-if 或 v-show 控制遮罩层显示

<template>
  <div>
    <button @click="showMask = true">显示遮罩层</button>
    <div v-if="showMask" class="mask" @click="showMask = false">
      <div class="mask-content">
        <!-- 遮罩层内容 -->
        这是遮罩层内容
      </div>
    </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);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.mask-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

使用 Vue 过渡动画增强效果

<template>
  <transition name="fade">
    <div v-if="showMask" class="mask" @click.self="showMask = false">
      <div class="mask-content">
        <!-- 遮罩层内容 -->
      </div>
    </div>
  </transition>
</template>

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

封装为可复用组件

<!-- Mask.vue -->
<template>
  <transition name="fade">
    <div v-if="visible" class="mask" @click.self="handleClose">
      <div class="mask-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

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

使用 Teleport 实现全局遮罩

Vue 3 可以使用 Teleport 将遮罩层挂载到 body 上：

vue实现组件遮罩层

<template>
  <button @click="showMask = true">显示遮罩层</button>
  <teleport to="body">
    <mask-component v-model="showMask">
      <!-- 遮罩层内容 -->
    </mask-component>
  </teleport>
</template>