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

相关推荐
雪芽蓝域zzs19 小时前
(六)打包优化 + Nginx 部署完整配置 + 项目收尾
前端·vue.js
研☆香19 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
宿67420 小时前
vue3-pinia
前端·vue.js
日光倾21 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
Buke..1 天前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
小白勇闯网安圈1 天前
Vue 进阶实战:事件修饰符、表单控制、购物车与 Ajax 请求
前端·vue.js·ajax
前端炒粉1 天前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆10241 天前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去1 天前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue1 天前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js