Debug-012-el-popover 使用 doClose() 关闭窗口不生效的处理方案

news2024/10/5 8:07:11

 前言:

        今天上午碰见一个非常奇怪的情况:一样的方法实现的功能,效果却不一样。

两个页面都是使用的doClose()去关闭的el-popover,其中有一个就是不生效,找不同找了半天,始终不得其解。请看效果吧:

el-popover-doClose()-ok

视频1(el-popover-doClose()-关闭成功的)

el-popover-doClose()-error

视频2(el-popover-doClose()-关闭不成功) 

代码完全一样,我把第二个页面的html部分copy到第一个页面中也用的很流畅。请各位大佬如果碰见过,踩过坑就给分析分析,留个言哈。

其实仔细看视频2,第一条数据确实是已经调接口删除成功了的,但是问题是popover还是没有关闭。

使用doClose()的原因:之前不知道el-popover上面有doClose()这个方法,也是百度查的。打印了一下它的REF才知道它上面确实有这个方法:

这个方法是可以替代v-model="visible"来控制显示隐藏的(显示用doShow()这个方法)主要还是因为是在table列表中,内容比较多,感觉用不了这个动态绑定v-model='visible + scope.row.id' 这种写法,但我记得好像失败了,最终才选择了用doClose()的方案。

但这些不是重点,重点是两个页面同种写法结果一个能关,另一个不能关,我就很费解。真的试了很久,依然不行,最终还是百度一下了。

看了好几篇博文,基本用的都是一种方法,但是他们给出的原因都是表格懒加载导致,可是我也没加这个属性,所以不能说服我,还说VUE不能检测到ref的值变化 不能触发视图更新(这个感觉靠点谱,但是视频1为什么行呢?)。不过他们给出的方法倒是真的很有效:

handleConfirm() {
	document.body.click() // 模拟点击页面其它部分关掉弹层,因为该页面列表使用懒加载导致doClose无效
}
 

在合适的位置添加一句document.body.click(),我的理解就是相当于模拟用户在别的空白处触发一个click()事件,这样自然能实现关闭el-popover的效果。

真的是解决了这个问题。

然后我又去问通义灵码:

全部答案我放在code中吧:

//问题:el-popover 使用 doClose() 关闭窗口为什么不生效

在 Element UI 中,el-popover 组件通常通过绑定 v-model 或 visible 属性来控制其显示和隐藏状态。当用户希望在特定条件下关闭 el-popover 时,通常会触发一个方法,比如 doClose,来改变 v-model 或 visible 的值。然而,如果你遇到 doClose 方法不起作用的情况,可能存在以下几个原因:

方法未正确绑定:

确保 doClose 是一个在 Vue 实例中的方法,并且在模板中正确引用。
如果使用 ref 访问 el-popover,确保 ref 已正确定义,例如 ref="popover",并且在方法中使用 this.$refs.popover.close() 调用。
事件触发问题:

如果 doClose 是在某个事件回调中触发,如点击事件,确保事件已正确绑定并且触发条件正确。
异步更新队列:

Vue.js 使用异步更新队列来处理数据变化。如果你在事件处理函数中直接改变 v-model 或 visible,可能需要使用 Vue.nextTick 或者 Promise.then 来确保在 DOM 更新之后关闭 el-popover。
懒加载导致的问题:

如你所述,如果列表使用了懒加载,可能在某些情况下,doClose 方法不会被触发,因为焦点仍然在列表的某个元素上,没有真正离开触发 el-popover 显示的元素。在这种情况下,可能需要通过模拟点击页面其他部分(如 document.body.click())来强制关闭。
CSS 选择器问题:

如果 el-popover 的关闭按钮或者触发器被其他元素覆盖,可能导致点击事件无法正确传播,从而影响 doClose 方法的调用。
组件实例问题:

如果 el-popover 是动态生成的,可能需要确保每个实例都有唯一的 ref,以便正确地访问和关闭相应的实例。
权限或角色问题:

如果 doClose 包含了角色或权限检查,而当前用户没有足够的权限,那么方法可能不会执行。
解决这类问题通常需要检查相关代码以确定具体的原因。如果 doClose 是 Element UI 自带的方法,确保你正确理解其用法,因为 Element UI 的官方文档通常会提供正确的使用示例。如果 doClose 是自定义的方法,那么需要检查该方法的实现和调用上下文。



//问题:前端中document.body.click() 的作用

在前端开发中,document.body.click() 这段代码的作用是模拟一个点击事件发生在页面的body上。具体来说,这段代码有以下几点作用和考虑:

触发页面默认行为:通过模拟点击整个页面的body,可以触发浏览器或页面上绑定的一些默认点击处理逻辑。这可能包括关闭某些弹出层、菜单或者重置焦点等交互效果。

解决特定场景问题:在您提供的Vue代码片段中,提到是因为列表使用了懒加载机制导致原本的关闭方法(假设为doClose)未能正常工作。在这种情况下,直接触发document.body.click()可能是一种变通方法,用来间接触发表单、对话框或其他组件的关闭逻辑,这些逻辑可能依赖于页面的点击事件来触发。

重置状态或焦点:在一些交互设计中,点击页面空白区域常用于重置当前界面状态或返回到初始焦点位置,比如关闭一个模态窗口后让页面背景可交互。

兼容性处理:在不同的浏览器和环境中,直接调用click()方法可能有兼容性问题,但通常在大多数现代浏览器中此操作是被支持的。不过,这种方式更多被视为一种hack手段,因为它绕过了正常的事件触发流程。

需要注意的是,这种做法虽然有时能解决特定问题,但并不总是最佳实践。它可能会导致不可预知的副作用,比如意外触发其他监听在body上的点击事件。在实际开发中,更推荐明确地管理组件的状态和事件处理逻辑,尽量避免使用全局性的模拟点击来控制UI行为。如果doClose方法无效,应该首先检查并修复其背后的逻辑或监听机制,而不是依赖于模拟点击整个页面body作为解决方案。

你别说还真挺专业的是吧,听完还是有些收获的,不过我感觉是其他因素导致的,不让第一个视频不会成功,目前我还没有找到问题关键,将来会跟新吧(如果有时间调研一下)

补充一下:

不过我担心确实点击事件绑在body上不太好,所以我在页面上单独写了一个用不到的DIV标签:

<div id="qwer" />

然后使用document.getElementById("qwer").click(),把事件绑在这个上面依旧有效,可以达到关闭el-popover的效果

不过按照通义灵码上讲到的,我这算不算是一种hack行为呢?

还有就是请问视频1为什么不用添加document.body.click()这种写法doClose()就生效呢?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1707860.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024-05-28 服务器开发-不同vs版本的std::string的访问出错问题-记录

摘要: 有一个dll库是使用vs2010编译的, 使用这个dll动态库的工程是vs2019. 这个dll动态库返回一个结构体&#xff0c;其中有个成员使用了std::string。但是遇到了std::string的成员显示被赋值为NULL的情况。 本文对进行分析, 重点在于追踪问题的思路。 问题描述: dll使用vs20…

java项目之飘香水果购物网站(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的飘香水果购物网站。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 飘香水果购物网站的主要…

margin-left: auto;使元素靠右

摘要&#xff1a; 今天写样式遇到一个东西&#xff0c;就是需要表单居右显示的&#xff0c;但是作用了弹性布局&#xff0c;其他的都不行的&#xff0c;一开始使用了浮动&#xff0c;但是使用了浮动后盒子就不继承父盒子的宽度了&#xff0c;移动端还行&#xff0c;自动回到100…

解析边缘计算网关的优势-天拓四方

随着信息化、智能化浪潮的持续推进&#xff0c;计算技术正以前所未有的速度发展&#xff0c;而边缘计算网关作为其中的重要一环&#xff0c;以其独特的优势正在逐步改变我们的生活方式和工作模式。本文将详细解析边缘计算网关的优势。 首先&#xff0c;边缘计算网关具有显著的…

【C++初阶】--- C++入门(中)

目录 一、缺省参数1.1 缺省参数概念1.2 缺省参数分类 二、函数重载2.1 函数重载概念2.2 C支持函数重载的原理 --- 名字修饰 三、引用3.1 引用概念3.2 引用特性3.3 常引用3.4 使用场景3.5 引用和指针的区别 一、缺省参数 1.1 缺省参数概念 缺省参数是声明或定义函数时为函数的…

解锁数据的力量:Navicat 17 新特性和亮点

解锁数据的力量&#xff1a;Navicat 17 新特性和亮点 大家好&#xff0c;我是猫头虎。今天我要为大家介绍 Navicat 17 的新特性和亮点。Navicat 是一款专业的数据库管理工具&#xff0c;支持多种数据库类型&#xff0c;包括 MySQL、Oracle、SQL Server、PostgreSQL、MariaDB、…

Jmeter元件及基本作用域

&#x1f680;从今天开始学习性能测试工具——Jmeter&#xff0c;小梦也是先学习了下Jmeter的元件概念以及其基本的作用域&#xff0c;整理了下笔记&#xff0c;希望不管是从事开发领域还是测试领域的朋友们&#xff0c;我们一起学习下Jmeter工具&#xff0c;提升工作中的技能&…

Compose Button移除水波纹效果

一、背景 在使用Compose实现Button按钮时&#xff0c;设计要求移除按钮的水波纹效果&#xff0c;只保留按压效果&#xff0c;经查Compose1.4.3版本中&#xff0c;并没有直接移除水波纹的能力 二、遇到问题 经过多次尝试&#xff0c;使用Compose的Button组件始终无法实现目标效…

NSSCTF-Web题目3

目录 [BJDCTF 2020]easy_md5 1、知识点 2、题目 3、思路 [ZJCTF 2019]NiZhuanSiWei 1、知识点 2、题目 3、思路 第一层 第二层 第三层 [BJDCTF 2020]easy_md5 1、知识点 弱比较&#xff0c;强比较、数组绕过、MD5加密 2、题目 3、思路 1、首先我们跟着题目输入&a…

蒙特卡洛法求解机械臂工作空间(以IRB4600型工业机械臂为例)

1. 概念 工作空间是衡量机器人工作能力的一个重要的运动学指标&#xff0c;蒙特卡洛法是一种随机模拟方法&#xff0c;用于在计算机上估计某些统计量&#xff0c;对于要估计的统计量&#xff0c;通过模拟大量的随机抽样&#xff0c;并计算这些样本的随机值来估算这个统计量的值…

第 8 章 机器人实体导航(自学二刷笔记)

重要参考&#xff1a; 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 9.1 概述 实体机器人导航与仿真环境下的导航核心实现基本一致&#xff0c;主要区别在于导航实现之前&#xf…

37. 解数独 - 力扣(LeetCode)

基础知识要求&#xff1a; Java&#xff1a; 方法、for循环、if else语句、数组 Python&#xff1a; 方法、for循环、if else语句、列表 题目&#xff1a; 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行…

上交提出TrustGAIN,提出6G网络中可信AIGC新模式!

月16日至18日&#xff0c;2024全球6G技术大会在南京召开。会上&#xff0c;全球移动通信标准制定组织3GPP&#xff08;第三代合作伙伴计划&#xff09;的3位联席主席分享了3GPP6G标准时间表&#xff1a; 2024年9月&#xff0c;启动6G业务需求研究&#xff1b; 2025年6月&…

代码随想录算法训练营第36期DAY35

DAY35 122买卖股票的最佳时机ii 很巧妙&#xff0c;也很难想到&#xff1a;计算每天的利润&#xff08;今天卖出&#xff0c;昨天买入的利润&#xff09;&#xff0c;只取正数相加。 class Solution {public: int maxProfit(vector<int>& prices) { int…

Broker的主从架构

为了保证MQ的数据不丢失而且具备一定的高可用性&#xff0c;所以一般都是得将Broker部署成Master-Slave模式的&#xff0c;也就是—个Master Broker对应一个Slave Broker Master需要在接收到消息之后&#xff0c;将数据同步给Slave&#xff0c;这样一旦Master Broker挂了&#…

YOLOV10阅读总结

GitHub - THU-MIG/yolov10: YOLOv10: Real-Time End-to-End Object Detection YOLOv10 - Ultralytics YOLO Docs https://arxiv.org/pdf/2405.14458 论文地址 最近yolo又出了个yolov10了&#xff0c;不得不感慨CV是真卷&#xff0c;毕竟yolov9也才没多久。记录一下阅读笔记。…

【JVM】一次JVM内存泄露分析处理

一次内存泄露分析 背景情况 编写了一个大数据基础组件的可用性监控程序&#xff0c;采用Bootstrap监测端口的方式&#xff0c;使得方法常驻&#xff08;main线程常驻&#xff09;&#xff0c;通过一个调度线程ScheduledThreadPoolExecutor&#xff0c;定时的调动监测任务。 …

短视频拍摄方式有哪些:四川鑫悦里文化传媒有限公司

​短视频拍摄方式有哪些 在数字化时代&#xff0c;短视频以其短小精悍、传播迅速的特点&#xff0c;成为了人们表达自我、分享生活的重要工具。然而&#xff0c;想要制作出引人入胜的短视频&#xff0c;除了创意和构思&#xff0c;拍摄方式的选择也至关重要。四川鑫悦里文化传…

详谈 Java中的list.forEach()和list.stream().forEach() 异同点

涉及的文章链接&#xff1a;ArrayList 循环Remove遇到的坑 一、想总结本篇博客的原因 在日常开发中&#xff0c;需要对集合数据进行或多或少的赋值修改&#xff0c;那么循环赋值或者做一些处理就是最常见的一种操作了&#xff0c;但是用习惯了stream流&#xff0c;所以在循环的…

聚合网卡和Wondershaper限速的一些问题(速度减半问题)

首先我们来了解一下聚合网卡&#xff1a; 聚合网卡&#xff0c;又称为链路聚合组&#xff08;LAG, Link Aggregation Group&#xff09;、端口汇聚&#xff08;Port Trunking&#xff09;、以太通道&#xff08;Ethernet Bonding&#xff09;等&#xff0c;是一种网络技术&…