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

相关推荐
知识分享小能手5 小时前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
柑橘乌云_7 小时前
vue中如何在父组件监听子组件的生命周期
前端·javascript·vue.js
江湖人称小鱼哥8 小时前
react接口防抖处理
前端·javascript·react.js
GISer_Jing9 小时前
腾讯前端面试模拟详解
前端·javascript·面试
萌萌哒草头将军9 小时前
🚀🚀🚀 Webpack 项目也可以引入大模型问答了!感谢 Rsdoctor 1.2 !
前端·javascript·webpack
小白的代码日记9 小时前
Springboot-vue 地图展现
前端·javascript·vue.js
teeeeeeemo9 小时前
js 实现 ajax 并发请求
开发语言·前端·javascript·笔记·ajax
清秋10 小时前
全网最全 ECMAScript 攻略( 更新至 ES2025)
前端·javascript·ecmascript 6
Juchecar11 小时前
Node.js package.json 配置详解 + TypeScript + ES Module 集成指南
javascript
李明卫杭州11 小时前
深入理解CSS变量(Custom Properties)
前端·javascript