当前位置：首页 > VUE

vue 实现遮罩

2026-01-07 23:02:12VUE

Vue 实现遮罩层的方法

使用固定定位和透明背景

在Vue中实现遮罩层可以通过CSS固定定位结合透明背景色完成。创建一个全屏遮罩组件，利用position: fixed覆盖整个视窗。

<template>
  <div class="mask" v-show="visible" @click="handleClose"></div>
</template>

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

<style scoped>
.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组件可以给遮罩层添加淡入淡出效果，提升用户体验。

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

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

动态控制遮罩层显示

在父组件中通过v-model控制遮罩层的显示状态，实现交互逻辑。

<template>
  <button @click="showMask = true">显示遮罩</button>
  <MaskLayer v-model="showMask" />
</template>

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

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

遮罩层内容定制

扩展遮罩层组件使其可以包含自定义内容，通过插槽实现内容灵活配置。

<template>
  <div class="mask" v-show="visible">
    <div class="mask-content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.mask-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 4px;
}
</style>

防止背景滚动

当遮罩层显示时，通常需要禁止页面滚动，可以通过动态修改body样式实现。

watch: {
  visible(newVal) {
    if (newVal) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
  }
}

vue 实现遮罩