elementui popover位置不固定_antd popover定位不准闪跳解决+自己实现popover库

最新推荐文章于 2024-07-29 22:07:42 发布
最新推荐文章于 2024-07-29 22:07:42 发布
阅读量3.5k 收藏 1
点赞数
文章标签： elementui popover位置不固定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34668850/article/details/113069592
版权
博客讲述了在开发H5编辑器H5-Dooring时遇到ElementUI Popover位置不固定和Antd Popover定位不准及闪跳的问题。作者决定自己实现一个Popover组件，通过设置动画解决初次显示的闪跳，并提供了实现思路和代码示例。最终，这个自定义Popover在H5-Dooring中成功替代了Antd Popover，实现了轻量化和功能需求。
摘要由CSDN通过智能技术生成

d90e33b3b1df8388d57e8948d3e59d62.png

前言

我在写H5-dooring时，发现我们用的popover会发生闪跳，而且第一次闪跳就算了，每次还会有另一个方向的闪跳。

于是我大概百度了下，基本都说需要给固定宽高即可，让后试了下发现没用，就算触发组件和弹窗元素都给了宽高，也一样闪跳。由于antd的popover底层的实现是套其他第三方的库，第三方库又用到了其他的前端组件, 所以锁心自己实现一个。

正文

初步实现

首先，我对popover粗略进行实现，主要就是一个弹窗定位问题，然后我照我预想实现后发现，一样会出现闪跳，但只有第一次会闪跳，后面比较正常：

cbfa31c74f97501f86dade65c19f62ce.png

可以看见，第一次显示会在左边，后续显示位置都ok。 所以思路就是让其在第一次显示时进行处理，顺便实现动画效果，不至于出现那么突兀。 由于我想做一个除react外零依赖的，所以就不考虑react-transition-gro

最低0.47元/天 解锁文章
W-Pwn
关注
react-popover::magnifying_glass_tilted_right:Varld的弹出窗口和工具提示库
05-22
Varld的Popover和工具提示库Varld制造的简单工具提示和Popover组件 :sparkling_heart:例子 :automobile: :delivery_truck:安装 # yarnyarn add @varld/popover# npmnpm install --save @varld/popover工具提示 ...
el-popover 位置问题，第一次点击位置乱飘，第二次点击恢复正常
ke_new的博客
11-18 9092
element-ui中el-popover,项目中使用时位置总是不固定，可能是什么元素影响的，发现第一次点击的时候，弹出框的高度比第二次点击少了很多，搞了半天没有头绪，请求前端大佬帮助~ 直接固定el-popover的样式： @1：将原本的 属性置空 placement 出现位置 @2：然后在弹出按钮处添加方法，手动处理属性 methods: { ...
el-popover消失会闪屏问题记录
weixin_43909743的博客
10-31 1909
el-popover hide 闪动
修改antd气泡卡片popover组件样式
最新发布
元元猿的博客
07-29 400
popover组件的宽度根据内容区域计算得到的适应宽度，解决该问题可以限制气泡卡片的最大宽度。antd popover组件在当内容过多时会出现宽度浮动（宽度一开始铺满然后再逐渐缩小到合适大小）的问题。要修改popover组件样式要用到。
antd 中 Tooltip 和 Popover 组件第一次打开位置错位，第二次正常
weixin_45190306的博客
10-15 6079
antd 中 Tooltip 和 Popover 组件第一次打开位置错位，第二次正常的问题记录：设置点击事件trigger=“click”，第一次打开是偏下，第二次再次点击即正常，https://ant.design/components/popover-cn/官网也没有显示，网上很多是说将content的内容限制好宽高，这在实际项目中是不可能的，不可能每可以进行设置：forceRender={true} <Popover placement="left"
antd Popover 气泡卡片，首次位置不对解决方法
u014206461的博客
09-10 4610
解决Ant Design of Vue - Popover 气泡卡片 首次位置不对问题 想要效果: 首次进入效果： 再次移入显示就对了，解决方法：加上高宽（:overlayStyle="{ ‘width’: ‘208.34px’, ‘height’: ‘267px’ }"）如下即可 <a-popover title="Title" :overlayStyle="{ 'width': '208.34px', 'height': '267px' }"> <template .
element-ui 里 el-popover 位置发生偏移
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-19 1万+
解决方案 在 el-popover 里添加下面配置 :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }" <el-popover ref="popover" placement="top" trigger="hover" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"> <span s
React antd使用踩坑总结2
CD2N_Queen的博客
11-11 1495
前端
cool_ui:用flutter实现一些我认为好看的UI控件,有Popover,仿Weui的Toast,自定义键盘
05-13
用flutter实现一些我认为好看的UI控件 希望大家提一些觉得不错的控件,我自己一个人想有时候想到的比较有限 Usage Add this to your package's pubspec.yaml file: Flutter >=2.0 dependencies: cool_ui: "^1.0.2" ...
react-popover:完全控制的Popover组件
05-06
React简单的弹出窗口基于完全控制的Popover组件。 安装 $ npm install react-simple-popover用法import Popover from 'react-simple-popover' ;import React , { Component } from 'react' ;class PopoverDemo ...
BootStrap使用popover插件实现鼠标经过显示并保持显示框
09-02
在本篇文章中，我们将探讨如何利用Bootstrap的popover插件实现一个功能，即当鼠标经过某个元素时，显示一个信息框，并在鼠标离开后保持一段时间再隐藏。 Popover插件是Bootstrap中的一个交互式组件，它类似于...
jQuery+bootstrap提示框插件Popover
06-10
Popover是一款功能丰富的提示信息插件，允许开发者在网页上创建上下左右可定位的提示内容，且提供了多种颜色样式的选项，以满足不同设计需求。 首先，jQuery是一个轻量级的JavaScript库，它的主要目标是简化...
element plus 的popover组件如何去自适应位置
Shivy_的博客
07-26 4022
element plus 的popover组件如何去自适应位置
如何自定义修改elementUi里popover弹出框的样式及位置
qq_42177730的博客
12-02 9420
需要单独写一个style样式 <div class="columnDiv" slot="reference"> <ul> <template v-for="(item, index) in columnList1"> <el-popov...
记elementUI的popover出现在页面左上角
weixin_47284124的博客
11-04 2139
导入文件，文件导入后跟后端要上传失败的条数，封装了一个组件，只要有数字大于0，elpopover立马出现，但是向后端发起请求在导入成功十秒后，在这十秒内切换界面，请求完成后再回来当前页面就发现了popover跑左上角了。一开始想在页面deactivated中获取elpopover然后display设置为none的，但是离开页面的时候元素都没加载出来，根本没法获取到。猜测应该是el-popover在切换界面的时候找不到定位了。出现情况：出现在了页面左上方。目标：出现在目标元素左侧。
el-popover怎么挂载在父元素，而不是body上；以及设置样式问题
热门推荐
九日的博客
11-16 1万+
为el-popover添加配置项： :append-to-body="false" :popper-options="{ boundariesElement: 'body', gpuAcceleration: true, positionFixed: true, preventOverflow: true }" 此时如果需要添加样式，只需要在组件内添加样式即可，不需要到全局添加： popper-class="weight-popper" /deep/.weight-popper {...}
使用antd中Tooltip和Popover组件时鼠标悬浮出现闪动情况
lml21lml的博客
05-18 4166
在使用antd 中Tooltip和Popover组件时,当trigger的状态为“hover"时，鼠标第一次移上去会出现闪动，第二次移上去处于正常状态，解决闪动的办法是：设置这个属性---->forceRender={true} <Popover trigger="hover" placement="top" arrowPointAtCenter={true} forceRender={true} //重要位置 /> ...
解决Element UI 组件el-popover图片溢出屏幕可视区域问题（popover定位问题）
weixin_41308436的博客
05-04 6070
分析原因 不固定popver大小，想让图片自适应完整显示时会出现这个情况。 原因：是图片未加载完成，即图片的宽高未确定，el-popover就已经初始化完成了，弹出的位置已确定。等图片加载完，内容撑开了，但是el-popover位置还是原来的，所以会溢出屏幕可视区域。 解决方法 等待img加载完成后更新一下el-popver this.$refs.popover.updatePopper() demo代码 非完整组件代码，仅供参考 <template> <el-popover .
手动更新popover的位置
weixin_44761091的博客
03-10 2639
问题描述 做人机对话界面，底部用户输入款，支持实时检索。使用el-popover展示搜索数据。当搜索出的数据先少后多时，popover弹出框会将用户输入遮挡： 原因分析： 项目中popover弹出框固定了最大高度，当数据由少变多时，popover没有动态计算位置，才会出现这种现象 解决方案： 手动更新popover弹出框的位置： nextTick(() => { // 手动更新popover的位置，防止遮挡输入框内容 if (elPopoverRef.value) {
antd popover 位置不对
07-27
原因是antd的Popover组件不支持className属性，而是使用overlayClassName来定义样式。你可以将className改为overlayClassName来解决这个问题。 另外，根据引用\[2\]中的代码，你提到antd popover的位置不对。为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值