vue实现遮盖弹出层

实现遮盖弹出层的基本思路

使用Vue实现遮盖弹出层通常涉及创建一个半透明的遮罩层（overlay）和一个位于其上的弹出内容层（modal）。遮罩层覆盖整个视口，阻止用户与背景内容交互，同时弹出层显示在遮罩层上方。

基础HTML结构

在Vue组件的模板中，需要包含遮罩层和弹出层的结构。通常使用v-if或v-show控制显示状态：

<template>
  <div>
    <!-- 遮罩层 -->
    <div 
      class="overlay" 
      v-if="showModal"
      @click="closeModal"
    ></div>

    <!-- 弹出层 -->
    <div 
      class="modal" 
      v-if="showModal"
    >
      <div class="modal-content">
        <slot></slot>
        <button @click="closeModal">关闭</button>
      </div>
    </div>

    <!-- 触发按钮 -->
    <button @click="openModal">显示弹出层</button>
  </div>
</template>

样式设置

通过CSS设置遮罩层和弹出层的样式，确保遮罩层覆盖整个屏幕且位于底层：

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

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

控制逻辑

在Vue组件的脚本部分，定义控制弹出层显示和隐藏的逻辑：

<script>
export default {
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    openModal() {
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    }
  }
}
</script>

高级功能扩展

锁定滚动条
当弹出层显示时，禁止页面滚动：

methods: {
  openModal() {
    this.showModal = true
    document.body.style.overflow = 'hidden'
  },
  closeModal() {
    this.showModal = false
    document.body.style.overflow = ''
  }
}

动画效果
为弹出层添加过渡动画：

<transition name="fade">
  <div class="overlay" v-if="showModal"></div>
</transition>

<transition name="slide">
  <div class="modal" v-if="showModal"></div>
</transition>

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

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}
.slide-enter, .slide-leave-to {
  transform: translate(-50%, -60%);
  opacity: 0;
}

使用Vue Teleport

对于更好的DOM结构管理，可以使用Vue 3的<teleport>将弹出层渲染到body下：

<teleport to="body">
  <div class="overlay" v-if="showModal"></div>
  <div class="modal" v-if="showModal"></div>
</teleport>