美文网首页
ant Design Of vue 采坑记录1:页面无法滚动

ant Design Of vue 采坑记录1:页面无法滚动

作者: 不负好时光_9c46 | 来源:发表于2021-05-06 14:12 被阅读0次

    项目中遇到在radio,select等表单元素(form是放在drawer上的)切换的时候页面会被锁定死,无法滚动,发现change事件的时候页面body被添加了内联css样式:position: relative; width: calc(100% - 17px); overflow: hidden;

    一直没有找到原因,开始的解决的方式就是使用js去将body里面的行内样式干掉:

    setTimeout(function() {

          document.getElementsByTagName('body')[0].setAttribute('style', 'overflow:auto')

        }, 200)

    但是后面页面逻辑复杂的时候难免有漏网之鱼,今天抽空打算从根本来解决一下这个问题。

    看了代码都没有向body添加样式,后面在node_modules中找到了源码,但是也不能直接修改node_modules吧,后面百度看到一篇文章,react中遇到了类似的问题:react开发中ant抽屉组件多层调用后页面被锁死Bug处理

    问题就出在抽屉drawer,默认情况drawer直接挂在body上面的,有一个getContainer属性可以改变挂载节点。

    解决方案: :get-container="false"

    相关文章

      网友评论

          本文标题:ant Design Of vue 采坑记录1:页面无法滚动

          本文链接:https://www.haomeiwen.com/subject/occddltx.html