Vue 使用 Devextreme框架,下拉框不会随页面的滚动而移动的问题解决

Devextreme的DxSelectBox组件的下拉选项部分,默认是绝对位置布局,导致页面滚动时,下拉部分不会上下移动

个人的解决方案,监听页面滚动事件,如果目前有打开的下拉框,先关闭下拉框,随后迅速再打开,视觉效果上可以做到下拉选项跟随组件滚动

vue项目中可能会有很多页面,很多下拉框,我是用的给每个下拉框组件一个id,然后分别处理opened和closed事件

1. 定义全局变量 SelectedBoxId, 每次有下拉框打开时,在opened事件中,将id赋值到这个变量

2. 每个下拉组件的closed事件中,传入当前组件id,如果当前打开的是当前下拉框,将SelectedBoxId 改成null

3. 监听页面滚动事件,处理下拉框的关闭和打开

  handleScroll(e) {
      if(this.selectedBoxId) {
        var comp = document.getElementById(this.selectedBoxId).__vue__.instance
        comp.close()
        setTimeout(()=>{
          comp.open()
        },50)
      }
    }

 

posted @ 2024-05-23 11:52  along_bro  阅读(49)  评论(0编辑  收藏  举报