控制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__wrapper 的 display 改为 block 并显示出来。

相关推荐
徐小夕6 小时前
JitOFD:一款面向信创与档案场景的 Web 端 OFD 编辑器
前端·vue.js·github
inksci7 小时前
在线编辑表格,功能强大,json互转
前端·javascript·html
咩咩啃树皮7 小时前
JavaScript 中 this 指向为什么总在变?
开发语言·前端·javascript
星光开发者7 小时前
基于springboot智慧草场牛羊管理系统-计算机毕设【课程设计】50360
vue.js·spring boot·后端·mysql·php·课程设计·express
咩咩啃树皮7 小时前
JavaScript 异步流程为什么容易失控?从回调到可维护设计
开发语言·javascript·ecmascript
橘猫走江湖8 小时前
Vue 3 虚拟 DOM:作用、触发机制,以及怎样变成页面上的真实节点
前端·vue.js·dom
weixin_BYSJ19878 小时前
电竞先锋网站---附源码02032
java·vue.js·spring boot·python·django·tomcat·php
zzppff1p9 小时前
用AI写了个小游戏
前端·javascript
普通人69 小时前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
KumaoHub9 小时前
棋牌游戏开发中聊天文本的长度限制与安全显示
javascript