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

 前言:

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

两个页面都是使用的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.mzph.cn/bicheng/17870.shtml

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

相关文章

Day 5:2785. 将字符串中的元音字母排序

Leetcode 2785. 将字符串中的元音字母排序 给你一个下标从 0 开始的字符串 s &#xff0c;将 s 中的元素重新 排列 得到新的字符串 t &#xff0c;它满足&#xff1a; 所有辅音字母都在原来的位置上。更正式的&#xff0c;如果满足 0 < i < s.length 的下标 i 处的 s[i] …

【第5章】SpringBoot整合Druid

文章目录 前言一、启动器二、配置1.JDBC 配置2.连接池配置3. 监控配置 三、配置多数据源1. 添加配置2. 创建数据源 四、配置 Filter1. 配置Filter2. 可配置的Filter 五、获取 Druid 的监控数据六、案例1. 问题2. 引入库3. 配置4. 配置类5. 测试类6. 测试结果 七、案例 ( 推荐 )…

移动端开发 笔记01

目录 01 移动端的概述 02 移动端的视口标签 03 开发中的二倍图 04 流式布局 05 弹性盒子布局 01 移动端的概述 移动端包括:手机 平板 便携式设备 目前主流的移动端开发: 安卓设备 IOS设备 只要移动端支持浏览器 那么就可以使用浏览器开发移动端项目 开发移动端 使用…

怎么看外国的短视频:四川鑫悦里文化传媒有限公司

怎么看外国的短视频&#xff1a;跨文化视角下的观察与思考 随着全球化进程的加速和网络技术的飞速发展&#xff0c;外国短视频逐渐走进了我们的视野。这些来自不同文化背景、语言体系和审美观念的短视频作品&#xff0c;为我们打开了一扇了解世界的窗口。然而&#xff0c;如何…

golang中的md5、sha256数据加密文件md5/sha256值计算步骤和运行内存图解

在go语言中对数据计算一个md5&#xff0c;或sha256和其他语言 如java, php中的使用方式稍有不同&#xff0c; 那就是要加密的数据必须通过流的形式写入到你创建的Hash对象中。 Hash数据加密步骤 1. 先使用对应的加密算法包中的New函数创建一个Hash对象&#xff0c;(这个也就是…

leetCode. 85. 最大矩形

leetCode. 85. 最大矩形 部分参考上一题链接 leetCode.84. 柱状图中最大的矩形 此题思路 代码 class Solution { public:int largestRectangleArea( vector<int>& h ) {int n h.size();vector<int> left( n ), right( n );stack<int> st;// 求每个矩形…

vue/uniapp 企业微信H5使用JS-SDK

企业微信H5需要我们使用一些SDK方法如获取外部联系人userid 获取当前外部联系人userid 使用SDK前提是如何通过config接口注入权限验证配置 使用说明 - 接口文档 - 企业微信开发者中心 当前项目是vue项目&#xff0c;不好直接使用 引入JS文件&#xff0c;但我们可以安装依赖…

使用nexus搭建的docker私库,定期清理无用的镜像,彻底释放磁盘空间

一、背景 我们使用nexus搭建了docker镜像&#xff0c;随着推送的镜像数量越来越多&#xff0c;导致nexus服务器的磁盘空间不够用了。于是&#xff0c;我们急需先手动删除一些过期的镜像&#xff0c;可发现磁盘空间并没有释放。 那么&#xff0c;如何才能彻底释放掉呢&#xff…

Golang | Leetcode Golang题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; func levelOrder(root *TreeNode) [][]int {ret : [][]int{}if root nil {return ret}q : []*TreeNode{root}for i : 0; len(q) > 0; i {ret append(ret, []int{})p : []*TreeNode{}for j : 0; j < len(q); j {node : q[j]ret[i] …

磁盘分区和挂载

磁盘分区和挂载 一、磁盘 业务层面&#xff1a;满足一定的需求所是做的特定操作 硬盘是什么以及硬盘的作用 硬盘&#xff1a;计算器的存储设备&#xff0c;一个或者多个磁性的盘片做成&#xff0c;可以在盘片上进行数据的读写 连接方式&#xff1a;内部设备&#xff0c;外…

深度揭秘:蓝海创意云渲染农场的五大特色功能

在当今数字化时代&#xff0c;影视制作、效果图设计等领域对于高质量的渲染需求日益增长。在这个背景下&#xff0c;云渲染平台成为了行业中不可或缺的一部分&#xff0c;它为用户提供了高效、灵活的渲染解决方案。蓝海创意云渲染农场https://www.vsochina.com/cn/render蓝海创…

软件需求分析和软件原型开发是一会事情吗?

软件需求分析和软件原型开发是软件开发过程中的两个重要环节&#xff0c;它们各自承担着不同的任务&#xff0c;但又紧密相连&#xff0c;共同影响着软件项目的成功。下面将详细解释这两个环节的定义、目的以及它们之间的关系。 一、软件需求分析 定义&#xff1a;软件需求分析…

C++学习日记 | LAB 6 static library 静态库

资料来源&#xff1a;南科大 余仕琪 C/C Program Design LINK&#xff1a;CPP/week06 at main ShiqiYu/CPP GitHub 一、本节内容 本节主要介绍静态库和动态库。 1.1 静态库和动态库的概念 静态链接和静态库(也称为存档)是链接器将所有使用的库函数复制到可执行文件的结果。静…

小程序唯品会Authorization sign

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章未…

Python---Matplotlib(2万字总结)【从入门到掌握】

数据可视化 在完成了对数据的透视之后&#xff0c;可以将数据透视的结果通过可视化的方式呈现出来&#xff0c;简单的说&#xff0c;就是将数据变成漂亮的图表&#xff0c;因为人类对颜色和形状会更加敏感&#xff0c;然后再进一步解读数据背后隐藏的价值。在之前的文章中已经…

nacos安装与使用

1.nacos简介与安装 什么是注册中心&#xff08;服务治理&#xff09; 服务注册&#xff1a;服务提供者provider&#xff0c;启动的时候向注册中心上报自己的网络信息 服务发现&#xff1a;服务消费者consumer&#xff0c;启动的时候向注册中心上报自己的网络信息&#xff0c;拉…

centos7防火墙入站白名单配置

firewall-cmd --set-default-zonedropfirewall-cmd --get-active-zone记录下当前激活网卡firewall-cmd --permanent --change-interfaceens33 --zonedrop firewall-cmd --zonedrop --list-all 添加信任的源IP和开放端口 firewall-cmd --permanent --add-source192.168.254.1 -…

【OpenCV】图形绘制与填充

介绍了绘制、填充图像的API。也介绍了RNG类用来生成随机数。相关API&#xff1a; line() rectangle() circle() ellipse() putText() 代码&#xff1a; #include "iostream" #include "opencv2/opencv.hpp"using namespace std; using namespace cv…

pillow学习3

Pillow库中&#xff0c;图像的模式代表了图像的颜色空间。以下是一些常见的图像模式及其含义&#xff1a; L&#xff08;灰度图&#xff09;&#xff1a;L模式表示图像是灰度图像&#xff0c;每个像素用8位表示&#xff08;范围为0-255&#xff09;&#xff0c;0表示黑色&#…

图算法新书发布会圆满成功,大咖现场都讲了啥?

5月24日&#xff0c;嬴图与机工社携手举办的“《图算法&#xff1a;行业应用与实践》新书发布会”圆满成功。 现场直播在线观众达4000人/次左右&#xff0c;点赞数量超7000&#xff0c;直至发布会尾声&#xff0c;观看人数仍在持续增长。 通过观众们的反馈&#xff0c;我们也对…