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

相关推荐
cos36 分钟前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
造糖主义3 小时前
vue-el-upload上传组件自定义删除-预览按钮遮罩层,不受原有的上传打开文件夹
前端·javascript·vue.js
BLACK5954 小时前
Nuxt3中PC端与移动端适配的三种方式(含Nuxt官网同款实现方式)
前端·vue.js·nuxt.js
小宁爱Python5 小时前
TypeScript 泛型详解:从基础到实战应用
前端·javascript·typescript
鱼樱前端5 小时前
一文讲解时下比较火的Rust语言之-rust开发环境搭建
前端·javascript
midsummer_woo5 小时前
基于springboot+vue+mysql的作业管理系统(源码+论文)
vue.js·spring boot·mysql
Moment6 小时前
Next.js 15.4 正式发布:Turbopack 全面稳定,预热 Next.js 16 😍😍😍
前端·javascript·node.js
虚!!!看代码6 小时前
uni-app 跳转页面传参
前端·vue.js·uni-app
脑袋大大的6 小时前
UniApp 自定义导航栏:解决安全区域适配问题的完整实践
前端·javascript·安全·uni-app·uniapp·app开发·uniappx