控制Vue对话框显示隐藏

正确做法 --- 使用 Vue 数据驱动控制显隐

你不需要手动设置 display: block,因为 Element Plus 的 <el-dialog> 是基于 v-model:visible.sync 控制的。

🔧 修改模板部分:

将原来的:

<el-dialog title="报文详情" v-show="dialogVisible">

改为:

<el-dialog title="报文详情" v-model="dialogVisible">

或者:

<el-dialog title="报文详情" :visible.sync="dialogVisible">

然后确保你在 data() 中定义了:

data() {

return {

dialogVisible: false,

dialogContent: ''

};

}

✅ 当你执行:

this.dialogVisible = true;

Element Plus 会自动把 .el-dialog__wrapperdisplay 改为 block 并显示出来。

相关推荐
天理小学渣14 分钟前
JavaScript_基础教程_自学笔记
开发语言·javascript·笔记
angerdream20 分钟前
最新版vue3+TypeScript开发入门到实战教程之生命周期函数
javascript·vue.js
胖橘23 分钟前
适用于Vue3的高集成度文件预览组件,支持多种类型的文件
前端·vue.js·开源
我叫黑大帅24 分钟前
🚀 JS 最常用的性能优化 防抖和节流
前端·javascript·面试
啊丫丫25 分钟前
【深入浅出地学习Vue】——vue2
前端·vue.js
图扑软件33 分钟前
图扑 HT 帧动画 | 3D 动态渲染设计与实现
前端·javascript·3d·动画·数字孪生
终端鹿41 分钟前
Pinia 与 Vue Router 权限控制实战(衔接Pinia基础篇)
前端·javascript·vue.js
绝世唐门三哥1 小时前
React--- 状态更新:何时需要拷贝,何时不需要?
javascript·react.js·ecmascript
我叫黑大帅1 小时前
JS中的两大定时器
前端·javascript·面试
掘金安东尼1 小时前
⏰前端周刊第 458 期v2026.3.24
前端·javascript·面试