vue切换菜单页面，会出现在页面跳转后el-popover不消失的问题以及解决方法

已于 2023-11-02 12:08:25 修改
阅读量821 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-11-02 12:07:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36761520/article/details/134179270
版权

问题

项目当中下拉组件基于el-popover封装，上一个页面点击下拉展开弹窗后不关闭，切换到下一个页面（首页，固定在上方tab页左侧），会出现下拉弹窗还显示的问题
在这里插入图片描述

解决方案

在路由守卫beforeEach中获取下拉的popover dom实例，手动通过样式隐藏弹窗，问题解决
在这里插入图片描述

qq_36761520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于Element Popover弹窗关不掉的解决办法
AuraVic的博客
08-18 4410
情景： 在 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
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
element plus el-popover气泡卡片既要手动控制显示又要点击空白处消失
最新发布
weixin_59339514的博客
03-01 665
点击其他按钮也能显示气泡卡片，然后，点击空白处又能消失
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 }
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 elementplus el-popover组件点击外部区域无法关闭问题
m0_62959350的博客
09-19 1300
1、从elemtn-plus中导入ClickOutside指令。3、onClickOutside绑定对应的方法。vue3.0中使用ClickOutside。2、从元素上绑定对应的指令。
Vue使用keep-alive后，el-tooltip悬浮内容在切换页面时不自动消失
fairy啊的博客
10-13 3299
比如在列表页面有个编号，编号过长时鼠标放上去会显示el-tooltip提示内容，当点击这个编号进入详情页面时，此提示内容不消失。本文介绍三种方法。
element-ui弹出框popover点击外部不消失的解决办法
high32的博客
01-25 6323
element-ui弹出框popover点击外部不消失的解决办法 设置trigger为manual; 用点击方法来控制是否关闭。 <el-popover v-model="isShow" placement="right" width="400" trigger="manual"> 234 <el-button slot="reference" @click.native="onShow">click 激活</el-button> </e
【避坑指“难”】el-popover 点击取消按钮，弹窗仍然无法关闭
椰卤工程师的个人博客
09-08 1558
给el-popover添加属性 :ref="popover-${scope.$index}" <el-popover placement="bottom" width="200" :ref="`popover-${scope.$index}`" :visible.sync="reviewVisible" > <div style
Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王佳斌
09-12 5345
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循环出来的气泡
vue 解决form表单提交但不跳转页面的问题
10-16
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
解决el-table中使用el-popover组件弹窗显示关闭问题
qq_41623635的博客
06-16 3683
【代码】解决el-table中使用el-popover组件弹窗显示关闭问题。
elementUI中Popover弹出框组件，点击组件内按钮，组件不关闭
小太阳的博客
12-14 3364
问题： 在表格内每一行使用Popover弹出框，点击Popover组件内的确定按钮，Popover不关闭 如图： 解决方式： 写一个按钮，模拟点击按钮 1.在页面中组件外写一个按钮，按钮的样式为假隐藏状态 <el-button id="popo-btn" ref="popo" /> #popo-btn{ width: 0; height: 0; border: none; padding: 0; margin: 0; } 2.点击确定时，执行模拟点击
element Popover 隐藏不销毁问题
weixin_45661272的博客
03-19 3628
element Popover 隐藏不销毁问题 前言 问题：循环渲染时使用Popover组件，当鼠标移入组件内显示popover后，移出隐藏，但是popover并不会销毁，这样导致dom内的popover越来越多，最后出现跳转路由出现下面的BUG <div v-for="item in list" :key="item.id"> <el-popover placement="bottom" wid
【通俗易懂】vue实现tagsview标签导航栏切换菜单功能【详细注释，都能看的懂】
热门推荐
seeeeeeeeeee的博客
07-13 2万+
前言： 最近遇到后台管理系统要写一个tagsview形式的标签导航栏。然后我新手不了解怎么做的，就去百度搜了一下，看到的都是一大段代码，复制也不生效，也没有介绍说怎么用，也不说思路，完全看不懂，后来自己研究慢慢试错，也实现了部分主要功能，那我就来弄个通俗易懂版本，写的详细点，让小白都可以看懂怎么使用，直接复制就可以用 效果图 四步骤： 1，标签导航组件 2，主组件结构插入导航组件的位置 3，vuex内的数据存储 4，路由的注意项 思路： 通过vuex来让数据可以实时变动。根据路由的变化来判断是否高亮，通过
【elementui】el-popover在列表里循环使用,取消的doClose无效解决办法
DecorateCC的博客
11-24 1692
在使用elementui的Popover 弹出框时，需求是在table列表里使用，循环出来，无法取消。
el-popover 点击其他位置关闭弹窗
hyzsde的博客
11-04 1479
第一次写前端项目，只会一些基础，如有错误请多多指点。
Vue+ElementUI使用el-popover内文本溢出解决
06-10
要解决el-popover内文本溢出的问题，可以通过设置CSS样式来控制： 1. 设置el-popover的宽度 可以通过设置el-popover组件的width属性来指定它的宽度。例如： ``` <el-popover width="200" placement="top"> <p>这是一段很长的文本，可能会导致溢出</p> </el-popover> ``` 2. 设置文本的样式 通过设置文本的样式，可以控制文本的溢出情况。例如，使用CSS的`text-overflow`属性来控制文本的溢出情况： ``` <el-popover placement="top"> <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">这是一段很长的文本，可能会导致溢出</p> </el-popover> ``` 其中，`white-space: nowrap`表示不允许文本换行，`overflow: hidden`表示超出文本框的部分隐藏，`text-overflow: ellipsis`表示在文本超出时显示省略号。 3. 使用ElementUI的popover文本溢出指令 ElementUI提供了一个叫做`v-popover`的指令，可以直接在文本所在的元素上使用。例如： ``` <p v-popover="'这是一段很长的文本，可能会导致溢出'">Hover me</p> ``` 其中，`v-popover`指令的参数为popover中要显示的文本内容。在鼠标移动到文本所在的元素上时，会弹出一个popover，显示文本内容。使用这种方式可以避免使用el-popover组件时出现的样式问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值