控制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 并显示出来。

相关推荐
傻梦兽6 分钟前
2025年,跟 encodeURIComponent() 说再见吧
前端·javascript
Lingxing8 分钟前
事件流:深入理解事件冒泡、事件捕获与事件委托
前端·javascript·面试
San3011 分钟前
JavaScript 入门精要:从变量到对象,构建稳固基础
javascript·面试·html
bug_kada14 分钟前
深入理解事件捕获与冒泡(详细版)
前端·javascript
小妖66635 分钟前
怎么用 tauri 创建一个桌面应用程序(Electron)
前端·javascript·electron
EndingCoder40 分钟前
单元测试:Jest 与 Electron 的结合
javascript·electron·单元测试·前端框架
程序员的世界你不懂2 小时前
【Flask】测试平台开发,重构提测管理页面-第二十篇
vue.js·重构·flask
猫猫村晨总2 小时前
整理了几道前端面试题
前端·vue.js·面试
浊浪载清辉3 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html