vue 实现弹出框
使用 Vue 实现弹出框的方法
组件模板结构
在 Vue 中创建一个弹出框组件，模板部分需要包含遮罩层和内容区域：
<template>
<div class="modal-mask" v-show="visible" @click.self="close">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button @click="close">关闭</button>
</slot>
</div>
</div>
</div>
</template>组件脚本逻辑
组件需要接收控制显示/隐藏的 prop 并定义关闭方法：
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
close() {
this.$emit('update:visible', false)
}
}
}
</script>基础样式设置
为弹出框添加基本样式：
<style scoped>
.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: white;
padding: 20px;
border-radius: 4px;
min-width: 300px;
}
</style>使用 v-model 控制显示
父组件中使用 v-model 控制弹出框显示：
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<Modal v-model="showModal">
<template #header>
<h3>标题</h3>
</template>
<template #body>
<p>弹窗内容</p>
</template>
</Modal>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
components: { Modal },
data() {
return {
showModal: false
}
}
}
</script>动画效果实现
通过 Vue 的 transition 组件添加动画：
<template>
<transition name="modal">
<div class="modal-mask" v-show="visible" @click.self="close">
<!-- 其余内容不变 -->
</div>
</transition>
</template>
<style scoped>
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
</style>可复用性增强
通过 provide/inject 实现深层嵌套调用：
// 在根组件
provide() {
return {
openModal: this.openGlobalModal
}
}
// 在任何子组件
inject: ['openModal'],
methods: {
showDialog() {
this.openModal({
title: '全局弹窗',
content: '通过依赖注入调用的弹窗'
})
}
}第三方库方案
使用 vue-final-modal 等成熟库快速实现：
npm install vue-final-modalimport { VFinalModal } from 'vue-final-modal'
export default {
components: {
VFinalModal
}
}<v-final-modal v-model="show">
<template #title>
第三方弹窗
</template>
<p>快速集成的弹窗内容</p>
</v-final-modal>
