当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/589890.html

相关文章:

  • C++设计模式之创建型模式
  • 【机器学习】数据理解:数据导入、数据审查与数据可视化
  • 数据降维方法:PCA
  • 集训Day02笔记总结(关于一些OJ题目的)
  • 第四章 OB SQL调优
  • Taro.eventCenter 用法详解与实战
  • DAY8-在地下城寻求邂逅Python是否搞错了什么
  • JavaScript语言 Error对象及错误处理机制 原生错误类型
  • Matlab数字图像处理——基于图像分割与模板匹配的的车牌识别系统
  • orfeotoolbox ResetMargin
  • mongoDB初始化项目简单操作示例
  • Windows 启动后桌面黑屏,其他程序正常运行
  • ARCGIS PRO DSK 颜色选择控件(ColorPickerControl)的调用
  • MySQL 8.0 OCP 1Z0-908 题目解析(28)
  • 数据库(five day)——物物而不物于物,念念而不念于念。
  • JAVA面试宝典 -《分布式ID生成器:Snowflake优化变种》
  • uniapp+vue3+鸿蒙系统的开发
  • Rust入门之并发编程基础(三)
  • Android开发知识点总结合集
  • 基于docker的redis集群
  • 智慧公厕系统打造洁净、安全的公共空间
  • 嵌入式学习笔记--MCU阶段--DAY06DHT11练习
  • java反序列化:CC1链深度剖析
  • EP01:【NLP 第二弹】自然语言处理概述
  • SFT:大型语言模型专业化定制的核心技术体系——原理、创新与应用全景
  • PDF 转 Word 支持加密的PDF文件转换 批量转换 编辑排版自由
  • AFFiNE开源知识管理和协作平台的部署,替代Notion不是梦~
  • Linux Ubuntu apt包管理器安装K8s1.30.1+Ingress-Nginx
  • 【Vue】tailwindcss + ant-design-vue + vue-cropper 图片裁剪功能(解决遇到的坑)
  • flink sql读hive catalog数据,将string类型的时间戳数据排序后写入kafka,如何保障写入kafka的数据是有序的