vue实现对话框效果
Vue 对话框实现方法
使用组件化方式封装对话框
创建一个独立的对话框组件（如Dialog.vue），通过v-model控制显示隐藏：
<template>
<div class="dialog-wrapper" v-if="visible">
<div class="dialog-mask"></div>
<div class="dialog-container">
<slot></slot>
<button @click="$emit('update:modelValue', false)">关闭</button>
</div>
</div>
</template>
<script>
export default {
props: {
modelValue: Boolean
},
computed: {
visible: {
get() { return this.modelValue },
set(val) { this.$emit('update:modelValue', val) }
}
}
}
</script>调用对话框组件
在父组件中使用v-model绑定显示状态：
<template>
<button @click="showDialog = true">打开对话框</button>
<Dialog v-model="showDialog">
<h3>对话框内容</h3>
<p>自定义内容区域</p>
</Dialog>
</template>
<script>
import Dialog from './Dialog.vue'
export default {
components: { Dialog },
data() {
return { showDialog: false }
}
}
</script>使用第三方UI库
Element UI的对话框实现：
<template>
<el-button @click="dialogVisible = true">打开对话框</el-button>
<el-dialog v-model="dialogVisible" title="提示">
<span>这是一段内容</span>
</el-dialog>
</template>
<script>
export default {
data() {
return { dialogVisible: false }
}
}
</script>动画效果实现
为对话框添加过渡动画：
<transition name="fade">
<div class="dialog-wrapper" v-if="visible">
<transition name="slide">
<div class="dialog-content">
<!-- 内容 -->
</div>
</transition>
</div>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.slide-enter-active, .slide-leave-active {
transition: transform .3s;
}
.slide-enter-from, .slide-leave-to {
transform: translateY(-20px);
}
</style>全局对话框服务
创建可编程的全局对话框：
// dialogService.js
import { createApp } from 'vue'
import Dialog from './Dialog.vue'
export default {
install(app) {
app.config.globalProperties.$dialog = {
show(options) {
const div = document.createElement('div')
document.body.appendChild(div)
const instance = createApp(Dialog, options)
instance.mount(div)
return {
close: () => {
instance.unmount()
document.body.removeChild(div)
}
}
}
}
}
}注册服务后可在任意组件调用：
this.$dialog.show({
title: '全局对话框',
content: '通过服务调用的对话框'
})
