Antd中遍历循环多个Popover, getPopupContainer无效

最新推荐文章于 2024-05-22 19:53:41 发布

Rosalina_luanbixia

最新推荐文章于 2024-05-22 19:53:41 发布

阅读量2.5k

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_26297923/article/details/125486034

版权

在Antd中遇到遍历循环创建多个Popover时，getPopupContainer设置无效，导致定位失效的问题。解决方案是为Popover的最近父级元素添加`position: relative;`样式，确保正确的定位。

摘要由CSDN通过智能技术生成

Antd中遍历循环多个Popover, getPopupContainer无效

<Popover
	content={
   
           <div className={
   styles.deletePop}>
	            <p>{
   trans('literacyEditor.deleteCommentTips', '您确定要删除该评语吗？')}</p>
	            <div className={
   styles.operation}</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rosalina_luanbixia

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vant组件之van-popover气泡框结合list数组列表循环使用

yangmy_Shy的博客

03-08

9672

<van-col span="6" class="dzmyBulk_xmCol" @click="stopUrlHref"> <p class="font14 color7BA">每吨利润(万)</p> <van-popover v-model="showPopoverFlag[index..

antdv 下拉框设置getPopupContainer无效，页面滚动还是不跟随页面滚动解决方案

qq_45919348的博客

12-12

3179

设置完getPopupContainer之后，组件还是不会随着页面滚动，因为getPopupContainer设置的是绝对定位absolute，还需要在组件所要依赖的父元素上设置相对定位relative。例如ant d 的popoconfirm 或者Popover 组件，都有一个getPopupContainer参数，可以控制组件的在指定的组件下，getPopupContainer可以有多中写法

2 条评论您还未登录，请先登录后发表或查看评论

Ant Design Dropdown 下拉菜单使用getPopupContainer报错

weixin_39031037的博客

12-08

1231

针对不能将类型“HTMLElement | null”分配给类型“HTMLElement” 错误,可根据实际情况使用!进行处理或者使用as进行断言;

Ant design vue Popover组件样式设置无效

张木期的博客

09-10

5956

审查元素的时候在.ant-popover-title里加上background-color:red;是有效的，但是我自己写代码的时候，这样写 /deep/.ant-popover-title{ background-color:red; } 无效，折腾了半天，死活不起作用，最后查资料是把<style lang="less" scoped>里的scoped去掉，然后再把/deep/去掉就可以了这样做影响了其他界面，但好歹对我这个项目没啥影响，可以这样用。查了更详细的资料后，发现popo..

【开发问题记录】ant design vue 的getPopupContainer

呆呆狗

10-28

3151

的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效。在 ant design vue 中，有几个组件是有。默认是渲染到body 上的，所以如果你想要对。属性的，比如：下拉菜单。

react antd 有多个Popover气泡卡片手动控制显隐

sw_onload的博客

06-20

8894

有个需求要实现点击批量复制输入复制数量，点确认复制当前行，点取消隐藏气泡框。用对话框的话显得大材小用，毕竟只有一个输入框，而Popover气泡卡片正好可以满足需求而且占用面积小。因为里面添加了自定义的确认、取消按钮，所以需要手动控制气泡框的显隐，那么问题来了。当给定一个值来控制显隐时，是完全不够的，这样会造成所有气泡框会同时出现。官方文档只演示了只有一个气泡卡片的例子，当然可以直接给state一个visible来控制显隐，而要控制多个，则需要定义第二个值来配合这是官方文档里的例子 import { Po

React antd使用踩坑总结2

CD2N_Queen的博客

11-11

1491

前端

Antd中tag组件删除一个导致删除多个

chenqk_123的专栏

07-22

1460

在做查询的时候使用tag做显示选中的多项值，如下图所示：当某一个查询字段支持多个值查询的时候，需要显示用户选择了那些查询条件。当然，需要支持用户删除已选择的某个条件值。发现：但当删除的时候，本来选择四个值，删除其中的一个会导致多删除一个，一般是删除中间的某一个，会导致同时删除两个。当通过debug的形式去查看元素的时候发现删除是一个值，剩下三个，可是在页面上却只显示两个，表单中的数据确实正常的：而打印的结果也是三个： <span>{type}：{map(names, obj =>

antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题

weixin_35891744的博客

12-23

2459

使用antd中的select下拉框，遇到个小问题，后台管理系统中，使用下拉框，一般不会是简单的就直接使用select中的value值，而是会使用id或者value中文对应的keyword，并且这个在option中的value值也是可能重复的1.效果图2.select相关代码我这里用的是reactlet list = [{title: '普通会员',id: 1},{title: '测试专用人员',i...

antd的Select组件的PopupContainer会随着滚动条上下移动的解决

不才的博客

11-26

1798

随着滚动条上下移动会错位使用： <Select getPopupContainer={trigger => trigger.parentNode}>

getPopupContainer={(node) =＞ node}的作用

最新发布

weixin_63681863的博客

05-22

391

是一种将Popover渲染到其触发元素内部的方法，确保它们在同一个容器内渲染。这样做可以提高布局控制、样式一致性和滚动同步性。根据具体需求，你可以选择是否使用这种方法。

阻止 antd Popover弹框点击事件冒泡

风小猪的博客

04-11

2784

设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。

用getPopupContainer解决Select ProFormSelect DatePicker ProFormDatePicker下拉框在滚动时偏移错位问题

清风明月的博客

06-29

2889

1、Select使用getPopupContainer改变浮层渲染父节点 <Select defaultValue="lucy" getPopupContainer={triggerNode => triggerNode.parentElement} onChange={handleChange} > <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Opti

Antdesign vue 中的getPopupContainer

weixin_43814775的博客

01-27

3431

vue 中的getPopupContainer 举个例子： 1.当没有使用 getPopupContainer的时候，他们是分开的 2.当==有==使用 `getPopupContainer`的时候，他们是一起的

tooltip的api【getPopupContainer】

y_yinkedada的博客

03-22

5259

使用tooltip或者其他使用之后，节点与当前页面节点不同级的组件，他们都会有个类似getPopupContainer的API，官方介绍用法：Function(triggerNode)，默认值是() => document.body。这样的结果就是： tooltip组件绑定在了body上面，和我们当前页面的层级是平级，那如果想要自定义组件里面的内容，样式用了scoped的话，就改不了。不免要改全局样式。所以就要加上getPopupContainer这个属性，写法 : 将改组件绑定到当前用到该组件

使用antd的Select组件，Cascader组件，DatePicker等下拉选项必须要添加的getPopupContainer（解决选项框随页面滚动分离问题）