在绘制前端界面时,不同浏览器的显示差距还是很大的,
例如在弹出Dialog的场景下,IE(11版)会出现滑动弹窗的问题,但是在Chrome上就不会出现。
在网上找到的方法,
1.添加@Touchmove.prevent,vue自带的方法,但是并未适配本场景
2.在body的样式种,添加overflow:hidden,
3.在body样式中,以定位的方式解决底层的滑动穿透(不具体展开,直接在网上搜滑动穿透)
一系列尝试下学到了不少东西,但是问题没解决。
之后转换思路,转向了解Vue的遮罩机制,Vue的dialog用法等,最终在嵌套dialog的方式里找到了解决问题的思路:
在嵌套dialog的编码要求中,要求内层的dialog的append-to-body属性,意为dialog自身是否插入至body元素上,
同时在IE上的表现为:
1.只有外层时同样存在滑动穿透,
2.点开内层之后就解决了该问题
反推,在项目中的dialog中加入属性append-to-body,经过实验,成功。
(IE是真的坑。。。。)