【Vue】如何解决web端弹出dialog时发生滑动穿透,ie浏览器,chrome浏览器

在绘制前端界面时,不同浏览器的显示差距还是很大的,

例如在弹出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是真的坑。。。。)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值