当前位置： 首页 > article >正文

vue中解决上个路由的el-dialog遮罩层未关闭问题

article 2024/9/21 17:50:02

1. 问题描述

开发vue2项目的时候，遇到一个路由页面打开弹窗的情况下跳转到另一个路由后，上一个路由页面的弹窗遮罩层还在。

2. 问题截图

  • 打开弹窗的路由1
    在这里插入图片描述
  • 点击 详情 页面后打开新的路由2
    在这里插入图片描述

3. 解决方法

文档中属性modal-append-to-body设置为false，将遮罩层插入至 Dialog 的父元素上。

4. 部分代码

<el-dialog
      title="XXX详情"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="visible"
      @close="close"
></el-dialog>

http://www.kler.cn/news/308772.html

相关文章：

  • mqtt整体了解
  • python实现多个pdf文件合并
  • 二十三种设计模式之适配器模式
  • 单调队列，LeetCode 2398. 预算内的最多机器人数目
  • ai 回答HFS是什么 HTTP的文件服务器是什么
  • 数据结构之排序算法的分析和应用
  • 【数据结构篇】~链表算法题3（环形链表）
  • C# net跨平台上位机开发（avalonia）附demo源码
  • 牛客背包问题练习 xinjun与阴阳师
  • 苍穹外卖学习笔记(八)
  • 【案例71】配置https之后 IE打不开登陆页面 Uclient没有问题
  • 《微信小程序实战（2） · 组件封装》
  • 【重学 MySQL】二十七、七种 join 连接
  • 宝塔Linux部署 Vue + Spring Boot + MySQL + Redis
  • Parallels Desktop 20 for Mac 正式发布，更新了哪些新功能（附下载链接）！
  • 深度学习驱动超材料设计领域发展
  • 用Inno Setup打包QT程序输出安装包
  • 消息队列的幂等问题解决方案
  • 51单片机+proteus+学习3（串口、矩阵按键）
  • 了解华为云容器引擎（Cloud Container Engine）
  • 关于http的206状态码和416状态码的意义、断点续传以及CORS使用Access-Control-Allow-Origin来允许跨域请求
  • 网络运维故障处理案例
  • 武汉传媒学院联合创龙教仪建设DSP教学实验箱，基于DSP C6000平台搭建
  • Pytorch详解-模型模块(RNN,CNN,FNN,LSTM,GRU,TCN,Transformer)
  • 了解云容器实例云容器实例（Cloud Container Instance）
  • JavaSE入门
  • 多线程同步
  • 【数据结构】经典题
  • 初始MYSQL数据库（5）—— 索引
  • LabVIEW减速机加载控制系统