ElementUI 手动控制 popover 弹层的显示与隐藏

已于 2022-04-22 13:52:44 修改
阅读量4.3k 收藏 3
点赞数 2
分类专栏： 总结 文章标签： element vue popover el-popover
于 2022-04-22 13:48:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShaLiWa/article/details/124343931
版权

ElementUI并没有给我们明确控制popover弹层显示与关闭状态的方法，应该如何控制呢？？？？

方法1、
通过ref获取元素之后发现，元素上面已经内置关闭和打开的方法

<el-popover ref="popover"></el-popover>

// 开启 doShow()
this.$refs.popover.doShow();

// 关闭 doClose()
this.$refs.popover.doClose();

方法2、参考文档案例，通过v-model
在这里插入图片描述

在给popper组件设置额外的class，需要使用popper-class

然后在全局css去改写样式

Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王佳斌
09-12 6373
vue3 element plus 气泡卡片el-popover组件，vue3 Popover 气泡卡片怎么手动关闭，element plus el-popover手动关闭，Element plus 饿了么组件库中el-popover气泡框弹出框手动关闭详细教程， element plus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，element plus 解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡
element Popover 弹出框循环列表控制显示和隐藏(非表格)
sinat_41694829的博客
04-27 2654
弹出框两个需求，第一是列表模块只能有一个模块弹框显示。第二是点击同一个模块进行显示和隐藏 文字描述可能不太恰当，看图 如图，在图片上点击第五个模块，出现此模块的弹框，再次点击其他模块，此模块的弹框消失 接下来上代码： <div class="park-right"> <el-popover placement="top-start" title="车位信息" width="250" trigge
ElementUI手动控制popover弹层的显示与隐藏
weixin_44532220的博客
12-20 1万+
是时候表演真正的技术了 网上找了一堆都是没用的。。。。搜的第一个是啥也没说 手动控制el-popover弹窗的显示与隐藏其实很简单，el-popover层绑定一个v-model的值为true或者false就行了。这是官网上给的Attributes。 而且显示根本不用控制，el-popover有一个trigger属性，trigger可以为click/focus/hover/manual，默认值是click，所以单击就能触发，主要是弹窗的隐藏问题。 <el-popover placement=
el-popover实现点击空白区域关闭，弹窗区域不关闭
最新发布
qq_43217258的博客
07-30 808
在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。而且关键是el-form自己不能挂ref，只能外层套一个div。，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了。的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）
主动手动控制el-popper的显示和隐藏
疑问 搜索 动手 解决 记录
06-22 1万+
element-ui官方示例 项目里的需求 两个关联处的代码结构 实现思路 通过1处的点击,来控制右下角的铃铛处显示popper弹出框 , 网上搜寻资料查询到 ,想手动实现主动控制它的显示和隐藏, 组件上挂载的有方法 doShow()和doClose() 于是在popper弹出框上写了一个ref节点 , 在1中通过this找到这个节点去调取节点上挂载的方法 ,就可以实现主动调取了 , 但是当我找到这个节点的时候 , 调取this.$refs.bottomElPopover.doShow()却丝毫不起
el-popover 点击确定或取消的时候隐藏弹窗问题
GhostUncledrew-blogs
04-17 1420
el-popover 点击确定或取消的时候隐藏弹窗问题 <template> <!-- 这个 v-model 赋的值是visibleList[index],index指的是循环的索引，而visibleList是一个数组 --> <el-popover placement="bottom" width="230" trigger="manual" v-model...
vue解决element-ui popover点击取消时 popover的显示与隐藏问题
@必意玲
05-09 2万+
popover时点击取消时 popover的显示与隐藏问题 1. popover演示实现效果 最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做 插槽的话就不行了。 2. 解决办法如下 在el-popover中加属性 :ref="popover-${scop...
关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题
热门推荐
Gunahao的博客
03-08 3万+
使用场景： 在table组件中删除数据操作时弹出popover提示，通过数据渲染时，会渲染出多个popover。当点击删除按钮展示popover。弹出后点击取消或确定隐藏。 但是官方文档只举例了单个空间的使用方式，若多个组件该怎么使用呢？以下是官方示例： <el-popover ref="popover5" placement="top" width="160" v-m...
el-popver 点击触发和使用方法触发
pscool的博客
07-08 5313
【代码】el-popver 点击触发和使用方法触发。
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
08-28
* 支持手动控制显示和隐藏 Bootstrap popover 的应用场景包括： * 提示信息和帮助提示 * 用户信息和头像展示 * 产品信息和详细信息 * 错误信息和警告信息 Bootstrap popover 是一个功能强大且灵活的提示信息插件...
记录elementUI el-popover的使用以及el-popove的关闭问题
weixin_38395200的博客
05-13 2044
记录elementUI el-popover的使用。 这里我使用的是umyUI的虚拟表格+el-popover，想要的效果是：点击表格的行数据显示我想要的菜单。 先题图，看效果， 直接贴代码 <ux-grid class="analysis-table" ref="reportTable" :data="analysisReportData.showReportData" size="min
bootstrap 点击空白处popover弹出框隐藏实例
08-28
Bootstrap 点击空白处Popover弹出框隐藏实例 ...本篇文章提供了一个基本的Bootstrap 点击空白处Popover弹出框隐藏实例，展示了Popover的基本用法、事件、手动触发、容器、取消冒泡和隐藏等知识点。
BootStrap自定义popover,点击区域隐藏功能的实现
08-28
其中，placement属性用于设置Popover组件的位置，trigger属性用于设置Popover组件的触发方式，delay属性用于设置Popover组件的显示和隐藏延迟时间，html属性用于设置Popover组件的内容是否为HTML格式。 在设置完...
element中El-form-item嵌套popover显示问题
成长的博客
02-08 1180
【代码】element中El-form-item嵌套popover显示问题。
[element-ui] 手动控制 popover 弹层的显示与隐藏
qq_14993591的博客
04-14 1661
ElementUI并没有给我们明确控制popover弹层显示与关闭状态的方法，但是通过ref获取元素之后发现，元素上面已经内置关闭和打开的方法 <el-popover ref="popover"></el-popover> // 开启 doShow() this.$refs.popover.doShow(); // 关闭 doClose() this.$refs.popover.doClose(); ElementUI 手动控制 popover 弹层的显示与隐藏 ...
element-plus】el-popover 点击其他区域关闭弹出框
qq_38210427的博客
06-10 1010
但是如果绑定了visible，那么弹出框所有的弹出隐藏都必须手动控制 ，也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏。出现，弹出框里有确认&取消按钮，点击确认&取消&其他区域，弹出框消失。需求：用户点击按钮，
element ui popover弹框针对条件控制显示和隐藏
Bitter的博客
12-10 2343
<el-popover placement="right-start" width="200" trigger="hover" :content="module.nav_suffix" :popper-class="module.nav_suffix?'':'popperclass'" > 第一：找到弹框显示或.
实现点击空白处或其他任意地方隐藏元素功能
m0_65448891的博客
01-23 862
这个还是蛮好理解的，我使用的也是这种方式，因为我的项目中需要这种需求的很少(好吧，就一个地方)，所以我采用了这种方式。
el-popover设置 :visible 手动关闭弹窗后，无法点击空白处关闭弹窗。
qq_41304029的博客
01-14 1149
**点击空白处隐藏 *//**提交方法 */
el-popover事件控制显示隐藏
05-26
el-popover 组件提供了两个事件用于控制它的显示和隐藏：`show` 和 `hide`。 你可以在元素上使用 `v-on` 指令监听这两个事件，然后在触发时调用相应的方法来控制 el-popover 的显示和隐藏。 例如，在下面的代码中，我们为一个按钮绑定了 `showPopover` 方法，该方法用于在按钮上触发 `show` 事件，从而显示 el-popover 组件： ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') } } } </script> ``` 同样，我们可以为 el-popover 组件绑定 `hidePopover` 方法，该方法用于在 el-popover 上触发 `hide` 事件，从而隐藏组件： ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200" v-on:hide="onHide"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') }, hidePopover() { this.$refs.popover.$emit('hide') }, onHide() { console.log('el-popover 隐藏了') } } } </script> ``` 在上面的代码中，我们为 el-popover 组件绑定了 `onHide` 方法，该方法用于在组件隐藏时打印一条消息。当点击按钮触发 `show` 事件显示 el-popover 后，我们再次点击按钮触发 `hide` 事件，从而隐藏组件。在组件隐藏时，会触发 `v-on:hide` 监听器并执行 `onHide` 方法，从而打印出一条消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值