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

相关推荐
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge4 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou6 小时前
js前端this指向规则
开发语言·前端·javascript
不想上班只想要钱7 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
岁月宁静7 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
JS.Huang10 小时前
【JavaScript】原生函数
开发语言·javascript·ecmascript
533_11 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
ftpeak11 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
一个很帅的帅哥12 小时前
JavaScript事件循环
开发语言·前端·javascript
武天12 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js