vue实现弹窗
Vue 实现弹窗的常见方法
使用组件化方式封装弹窗
创建一个独立的弹窗组件（如 Modal.vue），通过 v-if 或 v-show 控制显示隐藏：
<template>
<div class="modal-mask" v-show="visible">
<div class="modal-container">
<slot></slot>
<button @click="$emit('close')">关闭</button>
</div>
</div>
</template>
<script>
export default {
props: ['visible']
}
</script>在父组件中引入并使用：
<template>
<button @click="showModal = true">打开弹窗</button>
<Modal :visible="showModal" @close="showModal = false">
<h3>弹窗内容</h3>
</Modal>
</template>
<script>
import Modal from './Modal.vue'
export default {
components: { Modal },
data() {
return { showModal: false }
}
}
</script>使用 Vue 插件实现全局弹窗
创建弹窗插件（如 dialogPlugin.js）：
const DialogPlugin = {
install(Vue) {
Vue.prototype.$dialog = {
show(options) {
const DialogComponent = Vue.extend(Dialog)
const instance = new DialogComponent({
propsData: options
})
instance.$mount()
document.body.appendChild(instance.$el)
}
}
}
}注册插件后可在任意组件调用：
this.$dialog.show({
title: '提示',
content: '操作成功',
onClose: () => console.log('关闭回调')
})使用第三方 UI 库
Element UI 弹窗示例：
<template>
<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog :visible.sync="dialogVisible" title="提示">
<span>这是一段内容</span>
</el-dialog>
</template>
<script>
export default {
data() {
return { dialogVisible: false }
}
}
</script>使用 Teleport 实现（Vue 3）
Vue 3 的 Teleport 可以方便地将弹窗渲染到 body 下：
<template>
<button @click="show = true">打开弹窗</button>
<Teleport to="body">
<div v-if="show" class="modal">
<p>弹窗内容</p>
<button @click="show = false">关闭</button>
</div>
</Teleport>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>动画过渡效果
为弹窗添加过渡动画：
<template>
<Transition name="fade">
<div v-if="show" class="modal">...</div>
</Transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>每种方法适用于不同场景，组件化方式适合局部弹窗，插件方式适合全局调用，UI 库可快速实现标准样式，Teleport 解决 z-index 层级问题。根据项目复杂度选择合适方案。
