【问题标题】:Bootstrap-vue modal resets window.scrolY on close when shown inside vue-tabulator @row-click event当在 vue-tabulator @row-click 事件中显示时,Bootstrap-vue 模式会在关闭时重置 window.scrollY
【发布时间】:2020-11-05 15:00:05
【问题描述】:

我有一个带有@row-click 事件的 vue-tabulator 表,它触发了 bootstrap-vue 模态,当从按钮触发时,该模态显示完美,但从表行触发时,它居中垂直页面,我检查了window.scrolY 属性,它已经改变了。有什么办法可以防止这种行为?

【问题讨论】:

    标签: javascript css bootstrap-vue tabulator


    【解决方案1】:

    这是因为您的桌子上没有设置高度或 maxHeight。并且可能与数据更改有关,而不是与点击事件本身有关。

    没有在表格上设置任何高度选项,它使用经典模式而不是虚拟 DOM 呈现。在经典模式下,当数据更改时会重新绘制表格,这可能会导致表格的高度暂时发生变化,从而导致浏览器的滚动位置发生变化。

    【讨论】:

      【解决方案2】:

      稍等片刻之后,vue-tabulator 的创建者 Rogerio Angeliski 联系了我,并提出了这个巧妙的解决方案:

      Just put a :return-focus="'body'" in the modal to evict call focus fuction

      即使没有 height 属性,它也能完美运行。我相信这是完美的,因为我不想在桌子上设置固定高度。

      【讨论】:

        猜你喜欢
        • 2019-12-08
        • 2018-12-07
        • 2020-06-11
        • 2019-02-15
        • 2020-05-10
        • 2019-01-25
        • 2019-06-27
        • 2020-07-29
        • 2019-10-28
        相关资源
        最近更新 更多