vue实现弹窗效果

使用 Vue 实现弹窗效果

组件化弹窗实现

创建独立的弹窗组件 Modal.vue，通过 v-if 或 v-show 控制显示状态：

<template>
  <div class="modal-mask" v-show="show">
    <div class="modal-container">
      <slot></slot>
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['show']
}
</script>

<style>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

动态控制弹窗显示

在父组件中通过数据绑定控制弹窗状态：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <Modal :show="showModal" @close="showModal = false">
    <h3>弹窗内容</h3>
    <p>这是自定义插槽内容</p>
  </Modal>
</template>

<script>
import Modal from './Modal.vue'
export default {
  components: { Modal },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

使用 Vue Teleport 实现

Vue 3 的 Teleport 可以解决弹窗的 DOM 层级问题：

<template>
  <button @click="show = true">打开弹窗</button>
  <Teleport to="body">
    <Modal v-show="show" @close="show = false"/>
  </Teleport>
</template>

过渡动画效果

添加 Vue 过渡效果使弹窗更平滑：

<template>
  <Transition name="modal">
    <Modal v-if="show" @close="show = false"/>
  </Transition>
</template>

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

全局弹窗服务

创建可复用的弹窗服务（适用于 Vue 3）：

// modalService.js
import { createApp } from 'vue'
import Modal from './Modal.vue'

export function showModal(options) {
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)

  const app = createApp(Modal, {
    ...options,
    onClose: () => {
      app.unmount()
      document.body.removeChild(mountNode)
    }
  })

  app.mount(mountNode)
}

调用方式：

import { showModal } from './modalService'
showModal({
  title: '系统提示',
  content: '操作成功',
  onConfirm: () => console.log('确认')
})