由popover框一起的操作demo问题

场景: 当popover框弹出的时候,又有MessageBox 提示,此时关闭MessageBox 提示,popover就关闭了。将popover改为手动激活,可以解决这个问题,但是会引起另外一个问题,之前(click触发的时候),点击空白位置,可以关闭掉popover,但是现在却不可以了
解决
<el-popoverplacement="bottom"title="标题"width="200"trigger="manual"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"v-model="visible"><el-button slot="reference" @click="visible = !visible">手动激活</el-button></el-popover>
可以看到手动激活的时候,是通过visible来决定其显示或者隐藏,那是不是可以监听全局的点击事件来做处理:当MessageBox 隐藏的时候,且popover显示的时候,不点击(除了触发元素之外)的时候,做关闭处理
关键点在于如何知道点击的是哪个元素?
*点击A的时候不管,出了A之外要做处理,很明显这是个包含的关系 *
了解一下contains:探究元素之间是不是包含的关系

mounted() {document.addEventListener('click', this.handlePopoverShow);},beforeDestroy() {document.removeEventListener('click', this.handlePopoverShow);},handlePopoverShow(event) {const elements = $('.el-message-box__wrapper');const specificElement = $('.add-btn');const specificElementEdit = $('.edit-btn');console.log('specificElementEdit', specificElementEdit);let isShow = this.tableData.some((item) => item?._popoverVisible);if ((this.formPopoverVisible || isShow) &&elements.length &&elements[0].style.display === 'none') {if (!specificElement[0].contains(event.target)) {this.formPopoverVisible && (this.formPopoverVisible = false);}if (!specificElementEdit[this.indexEdit].contains(event.target) &&isShow) {this.tableData.forEach((item) => {item._popoverVisible = false;});}}}
相关文章:
由popover框一起的操作demo问题
场景: 当popover框弹出的时候,又有MessageBox 提示,此时关闭MessageBox 提示,popover就关闭了。将popover改为手动激活,可以解决这个问题,但是会引起另外一个问题,之前(click触发的时…...
人工智能ACA(四)--机器学习基础
零、参考资料 一篇文章完全搞懂正则化(Regularization)-CSDN博客 一、 机器学习概述 0. 机器学习的层次结构 学习范式(最高层) 怎么学 监督学习 无监督学习 半监督学习 强化学习 学习任务(中间层࿰…...
uniapp图片数据流���� JFIF ��C 转化base64
1,后端返回的是图片数据流,格式如下 ���� JFIF ��C 如何把这样的文件流转化为base64, btoa 是浏览器提供的函数,但在 小程序 环境中(如微信小程序…...
django中cookie与session的使用
一、cookie cookie由服务器生成 ,存储在浏览器中的键值对数据,具有不安全性,对应敏感数据应该加密储存在服务端每个域名的cookie相互独立浏览器访问域名为A的url地址,会把A域名下的cookie一起传递到服务器cookie可以设置过期时间 django中设…...
<项目代码>YOLO Visdrone航拍目标识别<目标检测>
项目代码下载链接 <项目代码>YOLO Visdrone航拍目标识别<目标检测>https://download.csdn.net/download/qq_53332949/90163918YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一…...
GhostRace: Exploiting and Mitigating Speculative Race Conditions-记录
文章目录 论文背景Spectre-PHT(Transient Execution )Concurrency BugsSRC/SCUAF和实验条件 流程Creating an Unbounded UAF WindowCrafting Speculative Race ConditionsExploiting Speculative Race Conditions poc修复flush and reload 论文 https:/…...
OPPO 数据分析面试题及参考答案
如何设计共享单车数据库的各个字段? 对于共享单车的数据库设计,首先考虑用户相关的字段。用户表可以包含用户 ID,这是一个唯一标识符,用于区分不同用户;姓名,记录用户的真实姓名;联系方式,比如手机号码,方便在出现问题时联系用户;注册时间,记录用户何时开始使用共享…...
腾讯云云开发 Copilot 深度探索与实战分享
个人主页:♡喜欢做梦 欢迎 👍点赞 ➕关注 ❤️收藏 💬评论 目录 一、引言 二、产品介绍 三、产品体验过程 四、整体总结 五、给开发者的复用建议 六、对 AI 辅助开发的前景展望 一、引言 在当今数字化转型加速的时代,…...
Mac M1使用pip3安装报错
1. Mac系统使用pip3安装组件的时候报”外部管理环境”错误: error: externally-managed-environment 2.解决办法 去掉这个提示 1、先查看当前python版本: python3 --version 2、查找EXTERNALLY-MANAGED 文件的位置(根据自己当前使用的pytho…...
flask-admin的modelview 实现list列表视图中扩展修改状态按钮
背景: 在flask-admin的模型视图(modelview 及其子类)中如果不想重构UI视图,那么就不可避免的出现默认视图无法很好满足需求的情况,如默认视图中只有“新增”,“编辑”,“选中的”三个按钮。 材…...
算法训练第二十三天|93. 复原 IP 地址 78. 子集 90. 子集 II
93. 复原 IP 地址--分割 题目 有效 IP 地址 正好由四个整数(每个整数位于 0 到 255 之间组成,且不能含有前导 0),整数之间用 . 分隔。 例如:"0.1.2.201" 和 "192.168.1.1" 是 有效 IP 地址&…...
imu相机EKF
ethzasl_sensor_fusion/Tutorials/Introductory Tutorial for Multi-Sensor Fusion Framework - ROS Wiki https://github.com/ethz-asl/ethzasl_msf/wiki...
【杂谈】虚拟机与EasyConnect运行巧设:Reqable助力指定应用流量专属化
场景 公司用的是EasyConnect,这个软件非常好用,也非常稳定,但是有个缺点,就是会无条件拦截本机所有流量,而且会加入所有运行的exe程序,实现流量全部走代理。 准备材料 一个windows/Linux 桌面版虚拟机Ea…...
【AI系列】Paddle Speech安装指南
文章目录 环境依赖1. 安装Python1.1 下载Python安装包1.2 安装gcc1.3 安装依赖库1.4 编译和安装Python1.5 配置环境变量 2. 安装PaddlePaddle3. 安装PaddleSpeech4. 运行PaddleSpeech5. 解决常见问题5.1 错误:libssl.so.1.1解决方法: 5.2 错误࿱…...
【AI学习】OpenAI推出o3,向AGI迈出关键一步
2024年12月21日,OpenAI在其为期12天发布会活动的最后一天,正式发布了备受期待的o3系列模型,包括o3和o3-mini。 o3 是一个非常强大的模型,在编码、数学以及 ARC-AGI 基准测试等多个基准上超过了 OpenAI 此前的 o1 模型(…...
深度学习0-前置知识
一、背景 AI最大,它的目的是通过让机器模仿人类进而超越人类; ML次之,它是AI的一个分支,是让机器模仿人类的一种方法。开发人员用大量数据和算法“训练”机器,让机器自行学会如何执行任务,它的成功取决于…...
Elasticsearch-分词器详解
什么是分词器 1、分词器介绍 对文本进行分析处理的一种手段,基本处理逻辑为按照预先制定的分词规则,把原始文档分割成若干更小粒度的词项,粒度大小取决于分词器规则。 常用的中文分词器有ik按照切词的粒度粗细又分为:ik_max_word和ik_smart&…...
Android-相对布局RelativeLayout
相对布局在摆放子视图位置时,按照指定的参考系来摆放子视图的位置,默认以屏幕左上角(0,0)位置作为参考系摆放位置 了解一下接下来都会以代码的方式可视化出来 属性 可选值 说明 layout_alignParentTop true/false 是否让控件相对于父容器顶部对齐 …...
Centos7, 使用yum工具,出现 Could not resolve host: mirrorlist.centos.org
在 CentOS 7 中使用 yum 工具时,如果出现 "Could not resolve host: mirrorlist.centos.org" 的错误,通常是因为默认的镜像源无法访问。以下是一些常用的解决方法: 检查网络连接:首先使用 ping 命令测试网络连接是否正常…...
在Linux中使用`scp`进行远程目录文件复制
在Linux系统中,scp(安全复制协议)是一个使用SSH(安全外壳协议)进行文件和目录安全传输的命令。它允许在远程主机之间复制文件和目录,具有很强的安全性,是一种常用的文件传输工具。以下是如何使用…...
openclaude:模型接入 Code 工具链
作为一名长期关注人工智能工程化落地的开发者,我深知本地大模型在隐私保护和成本控制上的优势,但往往苦于缺乏像 Claude Code 那样强大的工具调用能力。很多时候,我们拥有强大的模型(如 DeepSeek、Ollama 本地部署)&am…...
Phi-3-mini-4k-instruct-gguf保姆级教程:从CSDN GPU平台访问到结果导出全流程
Phi-3-mini-4k-instruct-gguf保姆级教程:从CSDN GPU平台访问到结果导出全流程 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理以及简短创作等任务…...
国产AI Agent爆发:从“龙虾风暴”看企业级Agent工具选型与实战指南
摘要: 作为一名在企业架构领域摸爬滚打15年的老兵,我见证了从SOA到微服务,再到如今AI原生架构的数次演进。2026年3月底,国内AI圈掀起的“龙虾风暴”标志着Agent工具正式进入爆发期。然而,对于IT负责人和CIO而言&#x…...
工业AI全流程定制开发:以服务适配需求,做实企业数智化改造
当前工业数智化改造已成为企业提升核心竞争力的关键,但行业内普遍存在一个核心痛点:服务与企业实际需求脱节。不少企业在推进数智化过程中,陷入“重产品、轻适配”的误区,盲目采用标准化AI产品,忽视自身生产流程、设备…...
Unity中如何通过Shader与Bounds控制实现视锥体外物体渲染
1. 为什么需要控制视锥体外物体渲染 在Unity的默认渲染流程中,摄像机只会渲染位于视锥体(Frustum)范围内的物体,这个机制被称为视锥体剔除(Frustum Culling)。这个优化手段能显著提升渲染效率,避…...
lite-avatar形象库效果展示:教师数字人在直播授课场景中的眼神交互与手势模拟
lite-avatar形象库效果展示:教师数字人在直播授课场景中的眼神交互与手势模拟 1. 引言:当数字人老师走进直播间 想象一下,你正在准备一场面向数千名学生的在线直播课。除了精心准备的课件和讲稿,你还需要一个能清晰传达知识、与…...
STM32串口发送字符串的底层机制与优化实践
1. STM32串口发送字符串的底层机制解析在嵌入式开发中,USART(通用同步异步收发传输器)是最常用的外设之一。当我们需要通过串口发送字符串时,实际上是将数据写入发送数据寄存器(TDR),然后由硬件…...
隐私优先方案:OpenClaw+Qwen3-14B镜像处理敏感数据的5层防护
隐私优先方案:OpenClawQwen3-14B镜像处理敏感数据的5层防护 1. 为什么需要本地化隐私方案 去年处理一批客户调研数据时,我犯过一个致命错误——把包含联系方式的原始表格上传到某公有云AI平台进行清洗。三天后,公司邮箱突然收到匿名勒索邮件…...
5G网络架构:核心网、接入网的组成与工作原理
5G网络架构:核心网、接入网的组成与工作原理📝 本章学习目标:本章探讨网络编程,帮助读者掌握网络应用开发技能。通过本章学习,你将全面掌握"5G网络架构:核心网、接入网的组成与工作原理"这一核心…...
第三方软件测评机构中CMA与CNAS资质对软件验收的重要性
CMA与CNAS资质的重要性 在软件项目验收过程中,第三方软件测评机构的CMA(中国计量认证)与CNAS(中国合格评定国家认可委员会)资质至关重要。这些资质不仅是机构专业能力的体现,更是确保测试结果公正、准确、可…...
