element-ui弹出框popover点击外部不消失的解决办法

最新推荐文章于 2026-06-22 07:21:03 发布
原创 最新推荐文章于 2026-06-22 07:21:03 发布 · 8.1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
12 篇文章 0 人学习
订阅专栏 查看详情
本文介绍如何在 Element-UI 中实现 Popover 组件的自定义显示隐藏控制，通过将触发方式设置为 manual，并使用按钮点击事件来手动控制 Popover 的显示与隐藏状态。

element-ui弹出框popover点击外部不消失的解决办法

  1. 设置trigger为manual;
  2. 用点击方法来控制是否关闭。
<el-popover
  v-model="isShow"
  placement="right"
  width="400"
  trigger="manual">
  234
  <el-button slot="reference" @click.native="onShow">click 激活</el-button>
</el-popover>

  methods:{
    onShow(){
      this.isShow = !this.isShow;
    },
   
  },
    data() {
      return {
        isShow:false,
      };
    }
标签
#ui #vue.js #前端
【TC3xx芯片】TC3xx芯片电源管理系统PMS详解
redparrot2008的博客
10-11 1445
本文主要介绍了TC3xx芯片的电源管理系统(PMS)，重点探讨了供电模式选择、电源监控机制及电源管理模式。文章首先分析了4种供电模式及其硬件配置方式，详细说明了3.3V单电源供电模式的特点；其次阐述了Primary和Secondary两种电源监控机制，包括阈值配置和异常中断处理；最后重点讲解了CPU和系统的电源管理模式，特别对Standby模式及其进入/退出条件进行了详细说明。文章以软件开发视角解析了TC3xx芯片的电源管理功能，为ECU低功耗设计提供了技术参考。
机器学习（ML）在材料领域应用
W5632DE的博客
04-06 3679
机器学习作为一种兼顾开发效率以及开发成本的方法，已经逐渐应用于材料发现、结构分析、性质预测、反向设计等多个领域，并且在材料学研究中展现出惊人的潜力。传统的发现新材料的方法，如经验试错法和基于密度泛函理论(DFT)的方法，往往需要较长的研发周期，成本高、效率低，已经不能很好的适应如今需求量激增的材料学领域 ...
[Element UI] el-popover实现点击空白区域关闭，点击弹窗区域不关闭
zennnlee的博客
05-12 769
的点击事件, 在该事件回调方法中, 判断点击的是否为 popover 组件外的空白区域, 若是, 则关闭 popover 组件.要在关闭回调事件中移除事件, 防止重复注册监听.在 popover 组件的。
element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例
天河书阁 - VicRestart
06-20 2557
该方案一般用于处理在默认情况下，在Popover中单击再打开新的popover元素时会导致外部的popover元素消失，所以简单粗暴的用下面方式进行处理了一下。
vue切换菜单页面，会出现在页面跳转后el-popover不消失的问题以及解决方法
qq_36761520的博客
11-02 1949
项目当中下拉组件基于el-popover封装，上一个页面点击下拉展开弹窗后不关闭，切换到下一个页面（首页，固定在上方tab页左侧），会出现下拉弹窗还显示的问题。
element Popover 隐藏不销毁问题
weixin_45661272的博客
03-19 4855
element Popover 隐藏不销毁问题 前言 问题：循环渲染时使用Popover组件，当鼠标移入组件内显示popover后，移出隐藏，但是popover并不会销毁，这样导致dom内的popover越来越多，最后出现跳转路由出现下面的BUG <div v-for="item in list" :key="item.id"> <el-popover placement="bottom" wid
elementUI中的popover嵌套popover弹窗不能自动关闭
HTML5_student的博客
03-08 6102
组件中有个弹窗el-popover，这个弹窗里面又引入弹窗el-popover，这样相当于是popover嵌套，导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭，就是这样 解决方法： popover内部嵌套popover的方法，在外层popover的内容上添加click事件（注意是否需要.native），用this.$refs.XXX.doClose()方法关闭，同时触发内部popover的reference，需要添加click事件阻止事件冒泡，两者缺一不可（不阻止事件冒泡，就会造
关于Element Popover弹窗关不掉的解决办法
AuraVic的博客
08-18 5335
情景： 在 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
element中popover弹框中有选择器，点击后popover消失的解决办法
伯约同学的前端学习之路
01-20 7996
element中popover弹框中有选择器，点击后popover消失的解决办法 element中有很多组件，经常用到的一个popover组件，很多时候大家都是使用它展示一些页面放不下或者不好放置的内容，很少在里面使用一些选择器，输入框等组件。 默认配置中，在使用到选择器组件时，一旦点击下拉选项，popover就会消失，这很明显不是我们想要的实现效果。 在hover=“click”的popover中，组件的显示与否，主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏，如果是的话，就不会
v-for中嵌套el-popover导致的弹出框显示异常
qq_55939481的博客
03-30 2433
问题描述： v-for中嵌套el-popover（点击触发），从而导致页面存在2个el-popover时，点击按钮但是弹出框无法显示的问题。 解决： 为el-popover添加v-model属性并绑定一个布尔值来控制其显示，又因为有多个el-popover，所以需要用数组统一管理所有的布尔值，并用外层v-for循环时的index来访问对应的布尔值。实现如下： <!-- 主体配置部分 --> <el-row :gutter="10" v-for="(row, rowIndex) i
用css实现一个弹出框（类似element的Popover ）
weixin_38992765的博客
09-20 2344
实现的效果 点击按钮弹窗子组件（采用vue的fade-in动画） 点击其他地方弹窗消失 tab选中效果 先上效果图 父页面 <transition name="fade"> <div v-if="locationvisible"> <locationDialog class="locationDialog"></locationDialog> </div> </transition&gt
写VUE项目中记录的点(element-ui,transition)
ll_883963的博客
01-08 3201
这里写目录标题1.Element-uiTooltip文字提示Badge 标记el-avatar 头像 1.Element-ui Tooltip文字提示 Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息 Badge 标记 Badge 标记 出现在按钮、图标旁的数字或状态标记。 el-avatar 头像 Avatar 头像用图标、图片或者字符的形式展示用户或事物信息 若DOM图片不变 在 :src后面加上:key值，就是:src的值 ...
elementui使用el-table中的el-popover,点击确定或者取消后关闭按钮弹窗
weixin_48398799的博客
03-22 6450
遇到的问题： ①、因为表格数据是循环展示的，导致点击后popover一次性出现多个，为保持popover的唯一性，需要给el-popover设置ref属性’popover-’ + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger=“manual”。 ②、弹出框弹出后不消失，el-popover的有内置方法 doClose ，通过引用popover对象然后调用doClose方法。 html: <el-popover placement="bottom"
VUE的页面用ElementUI实现按钮的二次确认功能
weixin_42260782的博客
05-19 3447
云平台增加后台遥控功能，为避免误触，在控制前加入遥控按钮，实现二次确认 遥控这个按钮用的是Popover 弹出框，取消事件设置visible为false，使弹出框消失，确认事件changeButton()改变状态。 <el-popover placement="top" width="160" v-model="visible"> <p>确定开始操作机器人吗？</p> <div.
el-popover对应展示关闭图标
钱多多的博客
11-08 1050
表格内最后一栏操作栏展示一个处理el-popover+向下图标的按钮,点击展示弹出框的同时改变图标为向上
el-popover在列表里循环使用，关闭不了????
Hassan的小博客!
12-07 1602
el-popove关闭不了，doClose()也关闭不了
Vue + Element plus 表格里面循环的气泡弹出后，点击新增表单需要关闭气泡，否则气泡一直残留在页面上。
qq_53961292的博客
11-07 593
【代码】Vue + Element plus 表格里面循环的气泡弹出后，点击新增表单需要关闭气泡，否则气泡一直残留在页面上。
el-table组件实现表头搜索
weixin_45723246的博客
12-11 3738
el-table实现在表头搜索数据，并解决点击搜索图标，搜索区域消失的问题
168张图，万字长文，手把手教你开发vue后台管理系统
热门推荐
程序员小明1024
10-03 2万+
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
从理论到实践：gh_mirrors/skill2/skills核心组件设计原则全解析
最新发布
gitblog_00864的博客
06-22 878
gh_mirrors/skill2/skills是一个专注于设计工程师技能的开源项目，提供了丰富的组件设计原则和动画标准，帮助开发者构建既美观又实用的用户界面。本文将深入解析该项目的核心组件设计原则，从哲学理念到实践技巧，为你呈现一套完整的设计工程方法论。 ## 设计工程的核心哲学：细节决定体验 设计工程不仅仅是实现功能，更是通过无数看不见的细节来打造卓越的用户体验。gh_mirrors/sk
【气动伺服控制】基于高速开关阀错时调制的气动伺服控制系统建模与仿真：从磁路到流量的多物理场耦合分析及滑模控制应用（含详细代码及解释）
内容概要：本文围绕“基于高速开关阀错时调制的气动伺服控制研究”展开，深入探讨了气动伺服系统的建模方法。首先，文章介绍了气动伺服系统的构成，重点剖析了高速开关阀（特别是两位三通直动式开关阀）的结构与工作原理，并详细阐述了其四种子系统模型——电子系统（基于等效电路和基尔霍夫电压定律）、磁子系统（基于安培定律和磁路分析）、机械子系统（基于牛顿运动定律）以及流体子系统（基于流体力学方程）。这四个子系统共同构建了完整的高速开关阀数学模型，为后续气压调控腔和气缸建模提供了理论基础。文章还提供了详细的Python代码实现，包括各个子系统的建模、系统级集成仿真、结果可视化等，展示了从理论到实践的全过程。此外，文章进一步讨论了错时调制策略在压力伺服控制系统中的应用，对比了传统PWM与错时调制（TIM）的性能差异，并引入了滑模控制算法以提高系统的响应速度和抗干扰能力。适用人群：本文适合具有自动化控制、机电一体化或相关专业背景的研究人员和技术人员，尤其是对气动伺服系统及高速开关阀有兴趣的学者和工程师。使用场景及目标：①理解和掌握高速开关阀的工作原理及其在气动伺服系统中的作用；②学习如何通过数学建模和仿真来分析和优化气动伺服系统的性能；③探索错时调制策略在实际工程中的应用
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值