记录el-popover中使用el-select或其他弹窗组件选择后会关闭问题

最新推荐文章于 2025-05-07 21:15:48 发布
最新推荐文章于 2025-05-07 21:15:48 发布
阅读量225 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexu_blog/article/details/147706393
版权

原因：el-select 默认会将元素插入body中，而不是插入popover中

vue2版本：在el-select中设置 :popper-append-to-body="false"

vue3版本: 在el-select中设置:teleported="false"

注意：这里对照一下自己本地的vue版本，别弄错了！

el-popover内有select的时候在选择后会自动关闭
南七小僧的学海无涯
08-31 1199
默认情况下，select 的下拉框dom是添加到body元素中的，这就导致虽然视图层面看，select 下拉框在 popover body里面，但实际上他们是dom关系是兄弟元素，所以点击下拉框的行为对于 popover 而言，和在popover外面鼠标点击的行为是一致的。这就导致popover也关闭了。尝试解决方法：将 select 组件的 teleported属性设置为false，使得它的下拉框被渲染在popover内部。
el-select（vue3总结）
qq_38210427的博客
06-09 957
修改Element-plus可清空Input的样式-CSDN博客
el-popover嵌套select弹窗点击实现自定义关闭
徐三岁的博客
07-19 1160
也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。
el-popover中嵌套使用el-select展开时自动关闭的解决方法
qq_38210427的博客
06-10 495
在嵌套的里边元素添加。
vue 解决el-popover 中嵌套dialog弹窗 点击dialog元素 el-popover 关闭的
先吃口饭的博客
03-26 701
思路是解决内部元素的冒泡。
el-popover实现点击空白区域关闭，弹窗区域不关闭
qq_43217258的博客
07-30 2340
在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。普通方法会无法关闭，虚拟触发会导致选一个关一个，不用visible显示的方法太麻烦。而且关键是el-form自己不能挂ref，只能外层套一个div。，表单选项默认挂在body上，你得取消，挂本页面才能不选一下就关闭了。的方法（点击蓝色区域看参考，这大佬vue2的，我vue3）
＜el-popover＞可以展示select change改变值的时候popover 框会自动隐藏
在路上`的博客
11-08 872
Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。
el-input触发 el-popover银行弹窗封装
qq_53026081的博客
04-07 3338
点击空白关掉弹窗：为了做成el-select的效果，单击空白时弹出框会关闭的效果，我写了一个全局的点击事件监听器，当点击的dom不是弹出框的内容区域就调取的el-popover的关闭函数，然后使用ref拿到弹出框的dom，这里要注意，如果是通过for循环生成的弹出框，ref拿到的会是一个数组，并且想要使用contains函数，一定要是dom节点，这里就突出了ref 和 id的不同了。html：由于业务需求，我所使用的是input作为触发组件，所以在在触发条件这里要使用自定义trigger="manual"
vue el-tooptip el-select el-popover等的样式修改问题 el-tree修改气泡窗问题
elizebeth6的博客
09-24 783
这些样式都有一个共同点就是他们都在vue的实例对象之外，只存在与最根部的html中，也就是说我们设置的时候要去APP.vue中进行设置，这样就会有一个问题，会影响全局的同类型组件 解决办法就是给他们加一个自定义的class类名 popper-class="autopop" 这里就不贴具体代码了，大家可以具体情况具体分析 下面说一下el-tree 还是修改样式的问题，修改的就是气泡窗以及自定义的按钮 代码如下 <el-tree :highlight-current="true" :data="chapt
el-popover中嵌套使用el-select
03-13
在el-popover中嵌套使用el-select可以实现在弹出框中选择选项的功能。下面是一种实现方式： 1. 首先，在el-popover的内容中添加一个el-select组件，设置好相应的选项和绑定的数据。 2. 在el-popover的触发元素上...
vue element ui el-popover 样式修改不生效解决方法
热门推荐
疑问 搜索 动手 解决 记录
04-03 1万+
在使用element 的el-popover 组件时，会发现自己对el-popover 写的样式不起作用，甚至连使用 ::v-deep ‘>>>’ /deep/ 行内Style 这四种样式穿透都不起作用， 这是因为 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style 首先给它添加一个特定的类名 , 千万别重复 , 语义命名以免样式污染 popper-class="down-popover"
el-popover里面放el-select，当el-select值改变时不自动隐藏el-popover
08-31
您好！...在这个示例中，我们给el-popover添加了`trigger="manual"`，并且在el-select的`change`事件中，根据选择的值来决定是显示还是隐藏el-popover。 希望这能帮助到您！如有任何问题，请随时提问。
setup 函数在 Vue 3 中的作用是什么？什么时候会执行
Bruce__taotao的博客
05-06 672
setup()函数是Vue 3 中 Composition API 的核心入口，它在组件生命周期中扮演了非常关键的角色。setup()是 Vue 3 中组件逻辑的统一入口，在组件创建前执行，用于定义响应式状态、逻辑封装、生命周期注册、事件触发等，是 Composition API 的核心支点。就是把setup()函数**“自动内联展开”，省略return {}等冗余写法，让你写的每一行代码自动在 setup 环境中执行**。
空值运算符最佳实践清单（适用于 Vue 项目）
字节叔叔
05-07 14
建议理由优先使用?替代深层&&判断更清晰、简洁展示用户数据或接口返回值时配合??提供默认值防止界面空白或崩溃表单初始值统一使用??''处理避免 uncontrolled 警告在 computed / methods 中统一处理空值逻辑保持模板整洁编写公用函数封装复杂的空值获取提升代码复用性。
【Vue】移动端开发（Uni-app、Taro）
Guiat的博客
05-03 881
Uni-app 是一个使用 Vue.js 开发所有前端应用的框架。支持一次开发，多端部署（H5、小程序、App等）。使用 Vue 的语法规范，兼容大部分 Vue 生态。Taro 是一个多端统一开发解决方案，由京东凹凸实验室开源。支持 React、Vue、Vue3 等多种框架。支持编译到微信小程序、H5、React Native 等平台。熟悉 Vue；项目需要发布到 App；更关注快速上线；→ 推荐使用Uni-app。熟悉 React；项目更偏向小程序；
Vue 实现 Hls、Flv 协议视频播放
qq_39927511的博客
05-06 759
Hls 是苹果公司推出的基于 HTTP 的自适应流媒体传输协议，它将视频流分割成一个个小的.ts 格式的视频片段，并通过.m3u8 格式的播放列表文件来管理这些片段。Hls 协议具有良好的跨平台性，在 iOS、Android 以及各大主流浏览器中都能得到较好的支持，尤其适用于网络环境不稳定的场景，能够根据网络状况自动调整视频码率，保证视频的流畅播放。Flv 是一种基于 Flash 平台的视频格式，它具有体积小、加载速度快、播放流畅等特点，在早期的 Web 视频播放领域被广泛应用。
DAY03：Vue深度解析之响应式系统与计算属性实战指南
java2cy
05-07 680
本文从Vue 3响应式系统的底层原理出发，深入探讨了ref与reactive的实现差异，通过计算属性与监听器的对比分析，揭示了不同场景下的最佳实践方案。结合条件渲染与列表渲染的底层机制，给出了性能优化关键策略。最后通过两个企业级实战项目，展示了如何将理论知识应用于复杂场景，构建高性能的Web应用。
在 Vue 2 中使用 qrcode 库生成二维码
最新发布
interest_ing_的博客
05-07 475
在现代的前端开发中，二维码生成是一个常见的需求，尤其是在需要快速分享信息（如网址、文本等）的场景中。Vue 2 是一个流行的前端框架，而 `qrcode` 是一个强大的库，可以帮助我们在 Vue 2 项目中轻松生成二维码。本文将详细介绍如何在 Vue 2 项目中使用 `qrcode` 库生成二维码，并展示一个简单的示例。
音乐网站|基于SprinBoot+vue的音乐网站(源码+数据库+文档)
weixin_66413741的博客
05-07 825
本音乐网站管理员功能有个人中心，用户管理，歌曲分类管理，歌曲信息管理，管理员管理，系统管理等。用户可以注册登录，试听歌曲，可以下载歌曲。因而具有一定的实用性。本站是一个B/S模式系统，采用Spring Boot框架，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得音乐网站管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高音乐网站管理效率。音乐网站；Spring Boot框架；MYSQL数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hexu_blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值