vue实现弹窗遮罩层

Vue 实现弹窗遮罩层的方法

使用 v-if 或 v-show 控制弹窗显示

在 Vue 中可以通过 v-if 或 v-show 控制弹窗和遮罩层的显示与隐藏。v-if 会完全移除或创建 DOM 元素，适合不频繁切换的场景；v-show 通过 CSS 的 display 属性控制，适合频繁切换的场景。

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <div v-if="showModal" class="modal-mask">
      <div class="modal-container">
        <h3>弹窗标题</h3>
        <p>弹窗内容</p>
        <button @click="showModal = false">关闭弹窗</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

<style>
.modal-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;
}

.modal-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}
</style>

使用 Vue Teleport 优化弹窗位置

Vue 3 的 <teleport> 可以将弹窗渲染到 DOM 的任意位置，避免父组件的样式或层级影响弹窗显示。

<template>
  <button @click="showModal = true">打开弹窗</button>
  <teleport to="body">
    <div v-if="showModal" class="modal-mask">
      <div class="modal-container">
        <h3>弹窗标题</h3>
        <p>弹窗内容</p>
        <button @click="showModal = false">关闭弹窗</button>
      </div>
    </div>
  </teleport>
</template>

通过事件修饰符阻止遮罩层冒泡

点击遮罩层时通常需要关闭弹窗，但点击弹窗内部时不触发关闭。可以通过事件修饰符 @click.self 实现。

<template>
  <div v-if="showModal" class="modal-mask" @click.self="showModal = false">
    <div class="modal-container">
      <h3>弹窗标题</h3>
      <p>弹窗内容</p>
      <button @click="showModal = false">关闭弹窗</button>
    </div>
  </div>
</template>

使用 CSS 动画增强用户体验

为弹窗添加过渡动画可以让交互更流畅。Vue 的 <transition> 组件可以方便地实现动画效果。

<template>
  <button @click="showModal = true">打开弹窗</button>
  <transition name="fade">
    <div v-if="showModal" class="modal-mask" @click.self="showModal = false">
      <div class="modal-container">
        <h3>弹窗标题</h3>
        <p>弹窗内容</p>
        <button @click="showModal = false">关闭弹窗</button>
      </div>
    </div>
  </transition>
</template>

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

封装为可复用的组件

将弹窗逻辑封装为组件，方便多处调用。通过 props 接收标题和内容，通过 emits 通知父组件关闭事件。

<!-- Modal.vue -->
<template>
  <transition name="fade">
    <div v-if="show" class="modal-mask" @click.self="close">
      <div class="modal-container">
        <h3>{{ title }}</h3>
        <p>{{ content }}</p>
        <button @click="close">关闭弹窗</button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String,
    content: String,
  },
  emits: ['update:show'],
  methods: {
    close() {
      this.$emit('update:show', false);
    },
  },
};
</script>

父组件调用方式：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Modal
    v-model:show="showModal"
    title="弹窗标题"
    content="弹窗内容"
  />
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      showModal: false,
    };
  },
};
</script>