elementUI中的popover嵌套popover弹窗不能自动关闭

Element-UI 弹窗遮罩层 z-index 管理:从 PopupManager 原理到复杂嵌套场景的实战修复 本文深入解析Element-UI中PopupManager管理z-index的原理,并提供针对el-drawer、el-dialog和el-popover等组件在复杂嵌套场景下的实战解决方案。通过状态快照恢复、模块化拆分和全局混入等方法,有效解决弹窗遮罩层层级混乱问题,提升后台管理系统开发效率。 阅读详情
AI摘要

本文探讨了在Vue组件中遇到的popover嵌套问题,即当一个popover内部包含另一个popover时,导致子popover无法正常关闭。通过添加click事件及阻止事件冒泡,实现了外层popover关闭及内层popover的独立控制。详细代码示例展示了如何使用this.$refs和doClose方法来解决这个问题。

组件中有个弹窗el-popover,这个弹窗里面又引入弹窗el-popover,这样相当于是popover嵌套,导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭,就是这样
在这里插入图片描述
解决方法:
popover内部嵌套popover的方法,在外层popover的内容上添加click事件(注意是否需要.native),用this.$refs.XXX.doClose()方法关闭,同时触发内部popover的reference,需要添加click事件阻止事件冒泡,两者缺一不可(不阻止事件冒泡,就会造成内部popover打不开–实际上是打开了又关掉了)

直接上代码

 <el-table-column label="状态" width="180">
        <template slot-scope="scope"> 
            <div class="num">
                <el-popover
                    placement="bottom"
                    width="180"
                    trigger="click">
                    <div style=" border-bottom:1px solid #000;margin-bottom:5px" @click="tableTwoPopoverClick(scope.row)">
                        <div class="status-item" v-for="(item,index) of statuslist" :key="index"> 
                            <el-popover
                                placement="bottom-start" 
                                trigger="click"
                                :ref="`Pop${scope.row.id}`"
                                @show="handleStatusWarn(scope.row,index)">
                                    <div class="ColorBox">
                                        <div class="ColorBoxItem">1</div>
                                        <div class="ColorBoxItem">2</div>
                                        <div class="ColorBoxItem">3</div>
                                    </div>  
                                    <div slot="reference">
                                        <div class="monday-style-clickable" >
                                            <div class="color-option-box" :style="`margin-bottom:10px;background-color:${item.color}`">
                                                **
                                            </div>
                                        </div> 
                                    </div>
                            </el-popover>  
                        </div> 
                    </div>   
                    <div slot="reference">
                         <div>{{scope.row.name }}</div>
                    </div>
                </el-popover> 
            </div>
        </template> 
 </el-table-column>

//关闭其他popover
//给嵌套的子el-popover加ref,这样就能找到子popover。获取所有循环出来的el-popover,如果这个el-popover的索引值和当前弹出的索引值相同,则不关闭,否则关闭弹窗
handleStatusWarn(val,index){
      var e =window.event || arguments.callee.caller.arguments[0];
       e.stopPropagation();  
       let eleList = this.$refs[`Pop${val.id}`]
       eleList.forEach((i,j)=>{
	      if(j != index){
	         i.doClose()
	     	}
       })
},
//点击其他地方,popover消失,如果不写点击页面的其他地方,弹窗不会消失
tableTwoPopoverClick(val){
	  let eleList = this.$refs[`Pop${val.id}`]
	  eleList.forEach((i,j)=>{ 
	      i.doClose() 
	  })
} 

修改后
在这里插入图片描述

element-ui组件Popover 弹出框,el-popover样式、定位以及二次确认弹出框自动关闭 问题 因为我写的里边有删除操作,所以有二次确认的操作,当我点确定或者取消删除的时候,el-popover就关闭了,但删除完肯定是不想关闭的,肯定想看到列表删了没。添加popper-class属性,这个属性就是我们平时的class属性,这不就好办了,我就去下面写样式了,但是发现没有用,下面是我的需求,因为我是动态添加和删除数据的,添加到一定高度,我想让内容可以滚动,但是不论我怎么设置最大高度都不行。你会看到下面这些,里边有两个函数,这两个函数就是关闭弹框,显示弹框,如果你不想关闭,这是JS部分代码,this.... 阅读详情

相关推荐

基于vue+Element Table Popover 弹出框内置表格的封装

在选择数据的时候需要在已选择的数据中对比选择,具体就是点击一个按钮,弹出一个小的弹出框,但不像对话框那样还需要增加一个遮罩层,跟加的轻量化,但是需要查看的数据很多需要一个列表来展示,列表的话还需要一个筛选功能。我的思路是增加复选框列,将选择的内容插入到外部的列表中,我这里主要是分享弹出框内置列表的一个封装思路。但是在这当中还会设计到列表、分页的方法,所以建议先搞清楚列表以及分页在来看,这些我之前的文章都有涉及。这里我们要用到的字段除了上述的还有很多,因为这个是内置了三个组件的封装组件。

Whit3ZzT的博客 3231

组件-Element—Popover( 弹出框)

组件-Element—Popover( 弹出框) 组件— 弹出框 基础用法 <template> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> ...

GU_AO_SHI_TAI_DU的博客 7760

element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例

该方案一般用于处理在默认情况下,在Popover中单击再打开新的popover元素时会导致外部的popover元素消失,所以简单粗暴的用下面方式进行处理了一下。

天河书阁 - VicRestart 2564

关于Element Popover弹窗关不掉的解决办法

情景: 在 element-ui 中 el-table 中使用Popover弹框 ,根据网上小伙伴提供的方法大部分都是这种: htm部分: <el-table-column> <template slot-scope="scope"> <el-popover placement="bottom" title="更多" width="100" trigger="click" :ref="`popover-${scope.$index}`"> <el-butt

AuraVic的博客 5337

泛微E9开发 明细表字段赋值到主表字段,将各类型合计赋值到主表类型合计中

①绑定明细表类型、预计金额字段的值改变事件,每当有值发生改变,就需要重新计算供应商1、供应商2、供应商3的合计,如果不绑定这两个字段的话,会出现计算不及时或计算错误的问题。②当有明细行被删除时,也需要重新计算供应商1、供应商2、供应商3的合计,比如删除了供应商1的明细行,如果不重新计算,那么供应商1的值还是被删之前的值,合计错误。将各类型合计赋值到主表类型合计中。

a_waste_only的博客 3836

滞回比较器电路详细分析

滞回比较器是一种用于检测两个不同电压值并使比较器输出高电平或低电平的电路。滞回比较器的特点是具有迟滞特性,即当输入电压高于某一阈值时,比较器输出高电平,当输入电压低于另一阈值时,比较器输出低电平,而在这两个阈值之间,比较器的输出保持不变。比较器通常有两个模拟电压输入端UIN+和UIN-以及一个数字状态输出端UOUT。当UIN+大于UIN-时,UOUT为高电平;当UIN+小于UIN-时,UOUT为低电平。根据具体的系统定义,这两种电位的具体数值可以有所不同。

LuDvei的博客 2万+

elementUi中的popover嵌套导致弹窗不能自动关闭

问题描述: 组件A中有个弹窗el-popover,这个弹窗里面引入子组件B,B中又有弹窗el-popover,这样相当于是popover嵌套,导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭,看效果: 这个问题在网上差了好久,什么‘popover嵌套导致的问题’等等啊,竟然没有一篇这个问题的文章,看来也挺冷门的,于是打算自己尝试改一下,中间的复杂过程就不说了,最后的解决方案如下: 因为无论是第一级的popover,还是嵌套的,都在body上,平级显示,所以不能区分出来,给嵌套的子

An滴饭儿的博客 3956

宜搭,高级认证实操2,FaaS连接器指导教程

找到FaasEntry.java将如下代码整体替换,注意引包。如图所示在util下新建EDSUtil.java代码如下。回到连接器界面点击右上角测试-->测试。连接器工厂-->新建FaaS连接器。保存-->前往云IDE开发。返回如图所示代码,部署成功。

2301_80286061的博客 3342

Vue ElementUI中 table单元格使用Popover

Popover的简单介绍 trigger属性用于设置何时触发 Popover,支持四种触发方式:hover,click,focus 和 manual。 对于触发 Popover 的元素,有两种写法:使用 slot=“reference” 的具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref。 placement 弹框的出现位置 value / v-model 状态是否可见 hide/show 关闭/显示时触发的事件 table单元格嵌套Popover,点击嵌套内容中的确定或取

qq_37828282的博客 5242

【人工智能】 WebDev Arena:实时AI Web开发竞赛的技术探索与价值

《AI编程竞赛推动Web开发技术创新》摘要:WebDev Arena作为聚焦Web开发领域的实时AI编程竞赛,通过标准化竞技环境检验AI模型在代码生成、问题解决等方面的能力。竞赛覆盖前端、后端等全流程开发环节,采用实时评分机制,推动AI对复杂Web需求的理解和多元技术栈适配。该赛事不仅促进AI编程技术创新,更为Web开发行业与AI技术融合搭建桥梁,有望提升开发效率、降低技术门槛。未来将拓展Web3.0等前沿技术主题,持续推动行业智能化发展。(150字)

奶爸的编程之路,也就一周冷个三天 255

低功耗设计-ir drop的signoff corner怎么选择?

2.tt的(tt85 是比较接近芯片真实工作情况的);我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧?有要求就用要求的就好,没要求前两种看公司需求。3.signoff文档要求的;有几个方向,看公司需求吧。

m0_61544122的博客 1591

Vue ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover,点击嵌套内容中的确定或取消来关闭el-popover。 <el-table-column width="100" align="center" label="操作"> <template slot-scope="scope"> <el-popover width="160" :ref="`popover-${scope.$index}`"> <p>确定删除该项吗?&

weixin_44745330的博客 7673

深入介绍 SAP OData CSRF Token 的一些技术细节

跨站请求伪造(Cross-Site Request Forgery,简称 CSRF)是一种网络攻击手段,它允许攻击者伪造用户的身份来执行未经授权的操作。为了防止 CSRF 攻击,常用的一种技术手段就是 CSRF Token.CSRF Token 是一种随机生成的防伪 Token,它由服务器颁发给客户端,并需要客户端在提交某些特定类型的请求时,将该 Token 添加到 HTTP 请求的头部字段去。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 642

element ui嵌套弹窗遮罩问题

弹窗嵌套弹窗时,嵌套弹窗被遮罩,或者嵌套弹窗关闭之后,父级弹窗遮罩不取消问题,只需要将嵌套弹窗设置 :append-to-body="true"属性即可。

u014008721的博客 2208

飞牛 NAS 部署 Hermes Agent 全指南:打造 24 小时在线、自我进化的 AI 智能体!

当大多数人还在把 AI 当聊天机器人使用时,我已经把它部署到了家里的飞牛 NAS 上,让它 24 小时在线工作、记忆我的习惯、自动执行任务,甚至还能不断学习新的技能。今天带你从零搭建这个真正属于自己的 AI Agent。🚀

XiaoqiangClub的博客 1225

使用 MATLAB/Simulink 对基于同步发电机的双机系统进行建模

双机系统(Two-Machine System)是电力系统中用于研究动态稳定性和控制策略的一个典型模型。它由两台同步发电机通过输电网络相互连接,模拟实际电网中的互联操作。当发生短路故障时,系统的暂态稳定性会受到挑战,可能导致发电机失步或电压崩溃。本教程将带你使用 MATLAB/Simulink 对基于同步发电机的双机系统进行建模,并对其在短路故障条件下的暂态稳定性进行仿真和分析。

amy_mhd的博客 216

vue 解决el-popover 中嵌套dialog弹窗 点击dialog元素 el-popover 关闭的

思路是解决内部元素的冒泡。

先吃口饭的博客 994

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

零碎知识点持续补充中...

当进行多人开发的时候,每次push的时候代码都要打包,因为你选择某一方的打包文件,都是不完整的代码,只要合并代码打包新的才行。 iview中小红点和 <Form-item prop="id"> 有关,id和校验rule对应上了就会有小红点。加上 require="true" ,只有小红点,实际不验证 测试的时候先确定是不是代理成功了,清浏览器缓存 一定要先git pull,再git ...

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等 1893

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

【前端】项目中遇到的问题汇总(长期更新)

【长期更新】前端项目中常遇到的问题汇总(vue3+elementPlus+node.js+axios+webpack)

sinat_39394862的博客 1238

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

vue + element插件Popover弹出框

方法一 使用自定义指令v-popover指向 Popover 的索引ref <el-popover ref="popover1" width="200" trigger="click" placement="top" content="这是一段内容1"> </el-popover> <el-button v-popover:popover1>click 激活1</el-button>

qq_43531886的博客 5062

element中的Popover 弹出框

1、当鼠标悬浮于“订阅新闻通讯“”按钮时弹出新闻标题、是否订阅框。2、点击相关的新闻标题在浏览器新页面打开该新闻的详细内容。3、点击“订阅”按钮,把用户名和相关新闻的标题记入浏览器localStorage中。

m0_62485757的博客 877

el-popover嵌套时,打开内部的popover后,点击外部popover的空白部分无法将内部popover关闭

那么这时候就遇到了一个问题,每次点击一个新的弹框,之前打开的弹框不会关闭,而且点击弹框以外的其他空白部分弹框也关不了,这个问题怎么解决呢?解决弹框无法正常关闭的总体思路就是使用它自带的doClose()方法,至于为什么会造成这种弹框无法关闭的现象,我也不太清楚,下边是我的大致解决过程。1、首先给每一个弹框一个独一无二的ref(也可以给他们统一的ref,我感觉我这里不适合使用统一的解决,就用了下面的方法)2、点击按钮获取对应的子组件,阻止冒泡,并获取到所有的popover。获取所有的popover的函数。

weixin_43641912的博客 3023

Element-UI表格嵌入popover出现的问题以及解决方案

6. 第5个问题还存在,在显示弹窗的div中加入v-if语句控制,写入全局变量vis,初始值为false,当数据为空时,vis为false不显示,数据传入时vis设为true,显示,控制语句在第二个代码块的cellEnter方法中。7.熬到现在已经过了两天,popover显示仍然有问题,弹窗的div在popover上面,popover有自己的样式,因此用自定义样式:popper-class修改样式,并且用全局变量vis控制显示的时机,这里这样写会出现一个警告。我这里使用了popover展示弹窗。

coder_xiaobai的博客 4672

Element-ui官方示例(Popover 弹出框)

Element-ui官方示例(Popover 弹出框)我们为新版的 vue-cli 准备了相应的​Element 插件​,你可以用它们快速地搭建一个基于 Element 的项目。

专注企业级视频应用,企业视频直播、MR虚拟直播、教育培训连麦直播 1121

element Popover 隐藏不销毁问题

element Popover 隐藏不销毁问题 前言 问题:循环渲染时使用Popover组件,当鼠标移入组件内显示popover后,移出隐藏,但是popover并不会销毁,这样导致dom内的popover越来越多,最后出现跳转路由出现下面的BUG <div v-for="item in list" :key="item.id"> <el-popover placement="bottom" wid

weixin_45661272的博客 4860
上一篇: input框focus,让外层的div产生样式变化:div的focus伪类
下一篇: Flex弹性布局
前端小li
博客等级 码龄7年 14粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值