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

相关推荐
清沫4 小时前
VSCode debugger 调试指南
前端·javascript·visual studio code
zhenryx5 小时前
React Native 自定义 ScrollView 滚动条:开箱即用的 IndicatorScrollView(附源码示例)
javascript·react native·react.js·typescript
振华OPPO6 小时前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架
李慕婉学姐7 小时前
【开题答辩过程】以《Javaweb的火花流浪动物救助系统设计与实现》为例,不会开题答辩的可以进来看看
vue.js·spring boot·mysql
拉不动的猪8 小时前
try...catch 核心与生态协作全解析
前端·javascript·vue.js
摇滚侠9 小时前
Vue 项目实战《尚医通》,预约挂号的路由与静态搭建,笔记36
javascript·vue.js·笔记
码上成长9 小时前
React 18 并发特性:useTransition 和 useDeferredValue 动画级解释
javascript·react.js·ecmascript
浩星9 小时前
vue3+datav实现大屏效果
vue.js·datav·大屏
百***680410 小时前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
G***T69110 小时前
React性能优化实战,避免不必要的重渲染
前端·javascript·react.js