vue 组件实现 遮罩

Vue 组件实现遮罩的方法

基础遮罩实现

通过一个全屏固定的div实现遮罩层，结合CSS设置半透明背景和z-index确保覆盖其他内容。Vue模板部分：

<template>
  <div class="mask" v-show="isVisible" @click.self="handleClose"></div>
</template>

样式部分需包含定位和背景色：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

控制显示与隐藏

在Vue组件中使用v-show或v-if控制遮罩显隐，通过props接收外部状态：

props: {
  isVisible: {
    type: Boolean,
    default: false
  }
},
methods: {
  handleClose() {
    this.$emit('close');
  }
}

高级功能扩展

支持锁定页面滚动，在遮罩显示时禁用body滚动：

watch: {
  isVisible(val) {
    document.body.style.overflow = val ? 'hidden' : 'auto';
  }
}

添加动画效果可通过Vue的transition组件实现淡入淡出：

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

配套CSS动画：

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

插槽整合内容

遮罩层内嵌内容时使用插槽，实现弹窗等复合组件：

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

内容区域样式需单独设置定位：

.mask-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}