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

相关推荐
mumu1307梦41 分钟前
html 占位符
前端·javascript·html
90后的晨仔1 小时前
Vue 组件事件完全指南:子父组件通信的艺术
前端·vue.js
正义的大古1 小时前
OpenLayers地图交互 -- 章节十六:双击缩放交互详解
javascript·vue.js·openlayers
Samsong2 小时前
如何调用逆向出来的JS代码
javascript·逆向
Asort2 小时前
JavaScript设计模式(六)——适配器模式 (Adapter)
前端·javascript·设计模式
Bella_a2 小时前
请描述Vue的生命周期钩子,并在哪个阶段能访问到真实的DOM?
vue.js
小样还想跑3 小时前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设
weixin_457126053 小时前
分享几个免费下载抖音、小红书、快手高清图片和视频的在线网站
javascript·python·html
_一两风3 小时前
Vue3 常用指令介绍
vue.js