vue遮罩层实现

实现遮罩层的基本方法

在Vue中实现遮罩层通常需要结合CSS和Vue的响应式特性。通过v-show或v-if指令控制遮罩层的显示与隐藏，配合CSS实现半透明背景和居中内容。

模板部分代码示例：

<template>
  <div class="mask" v-show="showMask" @click.self="closeMask">
    <div class="mask-content">
      <!-- 遮罩层内容 -->
      <slot></slot>
    </div>
  </div>
</template>

样式部分代码示例：

.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: 999;
}

.mask-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

控制遮罩层的显示与隐藏

通过Vue的data属性或props来控制遮罩层的可见性，可以添加过渡效果提升用户体验。

组件逻辑示例：

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeMask() {
      this.$emit('update:show', false);
    }
  }
}

添加过渡动画效果

使用Vue的transition组件为遮罩层添加淡入淡出效果，使显示隐藏更加平滑。

过渡样式示例：

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

修改后的模板：

<transition name="fade">
  <div class="mask" v-show="show" @click.self="closeMask">
    <div class="mask-content">
      <slot></slot>
    </div>
  </div>
</transition>

阻止背景滚动

当遮罩层显示时，通常需要阻止页面背景滚动，可以通过修改body的overflow属性实现。

方法实现：

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

可配置的遮罩层组件

通过props使遮罩层更灵活，可以配置点击外部是否关闭、自定义背景色等。

增强版组件示例：

props: {
  show: Boolean,
  clickToClose: {
    type: Boolean,
    default: true
  },
  backgroundColor: {
    type: String,
    default: 'rgba(0, 0, 0, 0.5)'
  }
}

动态样式绑定：

<div class="mask" 
     :style="{ backgroundColor }" 
     v-show="show" 
     @click.self="clickToClose ? closeMask() : null">
</div>