Popover 点击空白区域如何消失

最新推荐文章于 2025-04-04 14:26:04 发布
最新推荐文章于 2025-04-04 14:26:04 发布
阅读量488 收藏
点赞数 3
分类专栏： 前端 vue Element UI 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42931285/article/details/140002928
版权

使用虚拟触发，不要使用visible属性、

<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside">
    Click me
  </el-button>

  <el-popover
    ref="popoverRef"
    :virt
最低0.47元/天 解锁文章
Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王二红
09-12 7706
vue3elementplus气泡卡片el-popover组件，vue3Popover气泡卡片怎么手动关闭，elementplusel-popover手动关闭，Elementplus饿了么组件库中el-popover气泡框弹出框手动关闭详细教程，elementplus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，elementplus解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡
实现点击空白区域隐藏下拉弹窗
余阿良的博客
05-06 6802
分析elemntui v-clickoutside，实现点击开白区域隐藏下拉弹窗问题
element-plus如何点击空白处关闭el-popover
young_superc的博客
08-06 6836
element-plus如何手动关闭el-popover
bootstrap 点击空白处popover弹出框隐藏实例
08-28
下面小编就为大家分享一篇bootstrap 点击空白处popover弹出框隐藏实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
点击popover弹出框里的按钮，或者屏幕空白处，让popover弹出框消失
qq_46154004的博客
05-29 1341
点击操作出现弹出框，此时点击编辑、删除或者屏幕空白处，都让弹出框消失。用到的popover属性和方法。
element plus el-popover气泡卡片既要手动控制显示又要点击空白处消失
weixin_59339514的博客
03-01 1766
点击其他按钮也能显示气泡卡片，然后，点击空白处又能消失
el-popover实现点击空白区域关闭，弹窗区域不关闭
qq_43217258的博客
07-30 2365
在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。而且关键是el-form自己不能挂ref，只能外层套一个div。，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了。的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）
element样式冲突：el-popper弹窗样式冲突避坑
一粒程序米
04-25 1615
当同一个页面重复使用了不同样式的el-popper弹窗，但是页面只认其中一个样式，其实就相当于重写被覆盖了。而且element的样式重写是要在没有scoped属性的，所以一旦被重写，就是整个el-popper的弹窗样式被覆盖了。在对应的css里要这样改，要在前面加上.rewriteStyle这个类名进行区分。在对应的css里要这样改，要在前面加上.popperClass这个类名进行区分。这样就算在同一个页面使用，也不会有冲突了。最近，又踩上element大坑了。
a-popover点击空白区域不关闭
09-27
在Angular Material (a-popover) 中，如果你希望当用户点击弹出框外的空白区域时它不会自动关闭，你需要配置popover的一些属性。默认情况下，`<mat-popover>`会在其包围区域内捕获点击事件，包括外部区域。你可以...
vue2 的 antd popover点击空白区域不关闭
09-27
如果你想要实现在点击空白区域时不关闭Popover，你需要自定义事件处理逻辑。 一种常见的做法是给Popover添加一个`@clickoutside`事件监听器，并阻止该事件的默认行为，除非用户点击的是Popover内部的内容。这通常...
bootstrap popover与a标签点击事件冲突，需要点击两下才能显示问题
云中不知人的专栏
08-17 4353
做了个消息提示框，在dropdown-menu下的每个item点击弹出Popover框，页面代码如下： 0
elementUI中的popover嵌套popover弹窗不能自动关闭
HTML5_student的博客
03-08 5632
组件中有个弹窗el-popover，这个弹窗里面又引入弹窗el-popover，这样相当于是popover嵌套，导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭，就是这样 解决方法： popover内部嵌套popover的方法，在外层popover的内容上添加click事件（注意是否需要.native），用this.$refs.XXX.doClose()方法关闭，同时触发内部popover的reference，需要添加click事件阻止事件冒泡，两者缺一不可（不阻止事件冒泡，就会造
el-popover无法点击、点击没反应、不能正常唤起弹出框
为写出赏心悦目、容易维护的代码而探索
05-22 3549
点击更新状态后的那条数据操作按钮。发现element-ui的el-popover无法点击唤出弹窗，但刷新页面就可以正常点击进行操作。即el-popover刷新列表后无法点击。
在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)
热门推荐
VVVVV
07-06 1万+
使用出现的问题 根据element-ui文档与网上教程编写如下代码 <el-popover v-model="row.visible" trigger="click" > <span slot="reference" @click="row.visible=!row.visible">删除</span> </el-popover> 常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码 所以<span s
vue3+elementPlus 数组遍历el-popover虚拟触发
m0_64481126的博客
12-06 1356
【代码】vue3+elementPlus 数组遍历el-popover虚拟触发。
【element-plus】el-popover 点击按钮关闭弹出框
最是人间留不住，朱颜辞镜花辞树。
11-27 1万+
但是如果绑定了visible，那么弹出框所有的弹出隐藏都必须手动控制 ，也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。需求：用户点击按钮，弹出框出现，弹出框里有确认&取消按钮，点击确认&取消&其他区域，弹出框消失。链接：https://www.jianshu.com/p/3b2380a3920d。可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏。商业转载请联系作者获得授权，非商业转载请注明出处。
实现点击空白处或其他任意地方隐藏元素功能
m0_65448891的博客
01-23 1400
这个还是蛮好理解的，我使用的也是这种方式，因为我的项目中需要这种需求的很少(好吧，就一个地方)，所以我采用了这种方式。
ElementPlus使用Popover组件遇到的问题
wulenglinglz的博客
02-01 1922
ElementPlus框架Popover组件使用
Element-plus弹出框popover，使用自定义的图标选择组件
最新发布
YUELEI118的博客
04-04 1202
width16px;</</</</</</</importfromimportfrom// activeIcon: 用于返现用户已经选择的图标const;constref'';constref;// 订阅selected时间，发送用户当前选择的图标const'selected';// 通过js文件中的方法，将icon/svg文件夹中的图标的名字取出来functioniffilteritem。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值