Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)

简介: Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
  • 在使用阿里的 Ant Design Vue 框架时,在使用有下拉菜单 a-select 等组件,用在 a-drawer 等组件或者页面上的时候,会发现 a-drawer 等组件能滚动的时候,a-select 等组件的下拉菜单不会跟着走,停留在原地。
  • 这是滚动之后停留在原地的状态:

  • 但是我们希望在滚动的时候,下拉菜单也是需要跟着滚动,一直悬浮在输入框下面,这是正常状态:


  • a-select 代码需要这么写
<a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ></a-select>
  • a-date-picker 代码需要这么写,这里就不一一举例了,看看文档就行了
<a-date-picker :getCalendarContainer="(triggerNode) => triggerNode.parentNode" />
  • 或者可以手动指定到对应的节点上,举例一个,其他一样
<a-select :getPopupContainer="() => document.getElementById('xxx')" ></a-select>
  • 如果试过上面的都不行,那么拿出终极绝招
    1、通过上面官方自带的 (triggerNode) => triggerNode.parentNode 设置上,保证当前悬浮框是在使用组件内部的,不会放到别的地方去,
    2、然后用一个 div 包住当前组件,并设置这个 divcss 样式 position: relative;
    3、其实悬浮框的 css 样式就是 position: absolute;,那么将渲染到组件内部,在使用自己的 div 来限制一下它,它就会跟着当前 div 的坐标走啦。


  • 注意去每个控件的文档里面去看看是否有支持修改渲染容器的方法属性


相关文章
|
3天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
9 0
|
2天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
17小时前
|
JavaScript 程序员
程序员必知:Vue子传父的三种方法
程序员必知:Vue子传父的三种方法
|
18小时前
|
JavaScript 开发者
|
18小时前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
3天前
|
JavaScript
vue知识点
vue知识点
6 0
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
3天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1