拖动el-popver后里面的内容框重新渲染位置

原创 已于 2022-05-10 10:58:45 修改 · 869 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui

于 2022-05-10 10:51:34 首次发布
本文探讨了在navbar动态伸缩时，el-popover组件位置发生错位的问题。通过在navbar拖动事件中调用`this.$refs.popover.updatePopper()`方法，实现了el-popover的动态更新，确保了其位置的正确性。修复后的效果显著，避免了el-popover在navbar变化时的位置偏差。

需求场景：navbar可以进行伸缩，向左缩短向右缩长。1处是一个el-popover组件，点击它会弹出el-form，这时我拉长navbar，el-popover的位置就发生了错位，出现了在2的位置
在这里插入图片描述
**解决方法：**在拖拉拽navbar的事件里面添加 this.$refs.popover.updatePopper();this.refs.popover表示el−popover组件实例，‘this.refs.popover表示el-popover组件实例，`this.refs.popover表示el−popover组件实例，‘this.refs.popover.updatePopper()`表示在重新计算el-popover的位置
解决后的效果：在这里插入图片描述

修复element框架中el-popover动态添加内容时，布局超出界面的问题
guiplan
03-13 2256
分析之后其实其中的原理很简单，当悬浮的时候这边的el-popover就已经将要展示的位置计算好了。也就是位置已经固定了。如果再添加内容则不会再重新去计算位置了。所以解决办法也很简单，点击“链接”的时候只需关闭弹框，然后再强制打开弹框即可。需求如下：悬浮出现弹出框，然后点击“链接”之后，出现详细信息。发现虽然都展示了，但内容已经超出边界了如下图。
element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭 问题
m0_67391401的博客
08-01 3820
因为我写的里边有删除操作，所以有二次确认的操作，当我点确定或者取消删除的时候，el-popover就关闭了，但删除完肯定是不想关闭的，肯定想看到列表删了没。添加popper-class属性，这个属性就是我们平时的class属性，这不就好办了，我就去下面写样式了，但是发现没有用，下面是我的需求，因为我是动态添加和删除数据的，添加到一定高度，我想让内容可以滚动，但是不论我怎么设置最大高度都不行。你会看到下面这些，里边有两个函数，这两个函数就是关闭弹框，显示弹框，如果你不想关闭，这是JS部分代码，this....
el-popover弹出框更新位置刷新定位
liu_chenglong的博客
10-09 4167
el-popover弹出框更新位置刷新定位。当使用`el-popover`弹框提示，又需要同时加载数据时，就会出现位置错位的现象。 原因不言而喻，插件先计算了el-popover的位置，然后加载数据又
解决Element UI 组件el-popover图片溢出屏幕可视区域问题（popover定位问题）
weixin_41308436的博客
05-04 6742
分析原因 不固定popver大小，想让图片自适应完整显示时会出现这个情况。 原因：是图片未加载完成，即图片的宽高未确定，el-popover就已经初始化完成了，弹出的位置已确定。等图片加载完，内容撑开了，但是el-popover位置还是原来的，所以会溢出屏幕可视区域。 解决方法 等待img加载完成后更新一下el-popver this.$refs.popover.updatePopper() demo代码 非完整组件代码，仅供参考 <template> <el-popover .
Element el-table 和 el-popover弹出框 对单元格数据过长重新渲染
lu_wei_shuai的博客
01-15 2785
Element el-table 和 el-popover弹出框 对单元格数据过长重新渲染 <template> <!-- list位script中定义的数据源 --> <el-table :data="list" style="width: 100%;" row-key="id" stripe border @selection...
element ui 中 Popover 组件定位不精准的问题
dark_cy的博客
05-19 5011
Popover 内部数据动态获取到之后，Popover 尺寸变化导致的定位不准确
el-popover触发元素位置改变后更新弹出框的偏移位置
lingliu0824的博客
11-03 4712
但是如果触发元素位置发生变化时，如根据弹框选择内容，会显示或隐藏对应的元素，从而导致弹出框触发元素的位置的变化，此时触发元素位置变化了，但是弹出框还在变化之前的位置。2.监听导致触发元素位置变化的事件，调用组件updatePopper方法。el-popover的使用如下：包含一个触发元素和一个弹出框元素。1.给el-popover设置ref属性。
el-popver
最新发布
03-23
其中 `el-popover` 是用于创建弹出框的组件，可以用来显示额外的信息或交互选项。 以下是关于 `el-popover` 的基本用法和属性配置： #### 基本语法 ```vue <!-- 触发器按钮 --> <el-button v-popover:popover...
点击el-input出现el-popover,并且时el-popver始终处理el-input下方
12-09
3. 在JavaScript函数中，使用this.$refs获取el-input元素的位置信息，并计算出el-popover应该出现的位置。 4. 在el-popover标签中添加v-model属性，用于控制el-popover的显示和隐藏。 5. 在el-popover标签中添加...
el-popver elementplus
09-07
通过设置不同的触发方式(trigger)和位置(placements)，我们可以实现在用户交互时弹出相应的内容。在引用中的代码示例中，el-popover组件被用于创建一个类似气泡提示的效果。当鼠标悬停在"小李"这个span元素上时，会...
el-popver里的元素怎么加hover样式
03-19
通过浏览器开发者工具（F12）检查 el-popover 的实际渲染位置和类名，避免选择器路径错误。 - **避免全局污染** 不要移除 `<style scoped>`，而是通过 `:deep()` 限定作用范围。 - **样式优先级** 若默认样式...
＜el-popover＞可以展示select change改变值的时候popover 框会自动隐藏
在路上`的博客
11-08 1162
Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。
修改el-popover显示位置
热门推荐
BAtodl的博客
03-23 1万+
修改el-popver显示位置为触发显示时鼠标的位置
在动态表格中使用el-popver实现类似与el-select
LuckBaby_Yun的博客
08-04 1327
1.使用el-popover的trigger="manual"手动激活导致弹框卡顿；最终使用trigger="click"激活；但页面设置disable时点击之后弹框依旧会弹出，可使用css进行隐藏，修改el-popover的样式不能写在scoped里面；3.表格如果有被固定列，el-popover会弹出多个，查找了很多解决方法，目前暂未解决，我这里将固定列取消了。注：因为是在table表格中进行使用，所以在绑定ref时要加上下标让其唯一。（1）.进入页面监听页面的滚动事件。（2）.关闭弹框页面销毁监听。
el-popover 初始位置错误
LiangRZ
03-06 2321
如果里面数据动态化之后有问题位置不正确。
el-popover 初始弹出位置不准确，及el-popover超出屏幕问题
weixin_37739550的博客
07-13 8904
使用el-popover 弹窗框，弹出提示，初始化提示位置不正确 解决方案： 给嵌套的Table 设置高度后，位置就正确了 触发方式为 hover 时的,可以修改open-delay 设置popper 的边界元素 boundariesElement: ‘viewport’, boundariesElement默认是’viewport’，如果不需要跟边界重新计算元素的位置设置为’body’即可...
【vue】el-popover遍历渲染
王佑辉的博客
08-20 1358
1.示例图 2.示例代码 <template> <div> <el-popover placement="bottom" v-for="(item,index) in list" :key="index" width="250" trigger="manual" :ref="`popover-${item.id}`"> <div class="title"> <i class="el-icon-warning"&
对elementui中el-popover增加拖拽功能
lixu_boke的博客
12-04 2362
我这里是依据原生的jq进行操作的； 通过鼠标事件进行操作，通过鼠标的onmousemove事件进行拖拽移动定位；通过onmouseup进行管控拖拽结束功能 话不多说上代码： 首先是html的代码，先是使用咱们的el-popover 使用之后咱们通过代码的细化可以看到在el-popover中写了一个它自身的Class：popoverClass，通过这个class咱们可以获取到它的dom节点 通过console.log(popover)输出 我们可以看到其中的层次结构然后使用debugg
vue项目实现el-popover弹窗拖拽位置以及实现弹窗的拖拽调整大小功能
lFFFFFFl的博客
07-17 3441
vue项目实现el-popover弹窗拖拽位置以及实现弹窗的拖拽调整大小功能
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值