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

相关推荐
谎言西西里1 天前
JS 高手必会:手写 new 与 instanceof
javascript
天问一1 天前
使用 Vue Router 进行路由定制和调用的示例
前端·javascript·vue.js
源码获取_wx:Fegn08951 天前
基于springboot + vue心理健康管理系统
vue.js·spring boot·后端
韩立学长1 天前
【开题答辩实录分享】以《基于Vue的非遗文化知识分享平台的设计与实现》为例进行选题答辩实录分享
前端·javascript·vue.js
前端 贾公子1 天前
Vue响应式原理学习:基本原理
javascript·vue.js·学习
飛6791 天前
从 0 到 1 掌握 Flutter 状态管理:Provider 实战与原理剖析
开发语言·javascript·ecmascript
源码获取_wx:Fegn08951 天前
基于springboot + vue二手交易管理系统
java·vue.js·spring boot·后端·spring·课程设计
~无忧花开~1 天前
Vue二级弹窗关闭错误解决指南
开发语言·前端·javascript·vue.js
老华带你飞1 天前
在线教育|基于springboot + vue在线教育系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端
知行力1 天前
【GitHub每日速递 20251209】Next.js融合AI,让draw.io图表创建、修改、可视化全靠自然语言!
javascript·人工智能·github