【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是真的坑。。。。)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章