解決Vue開發(fā)中對話框被遮罩層擋住的問題
更新時間：2018年11月26日 11:29:24 作者：java_augur
在Vue的開發(fā)中，一旦我們用到對話框，經(jīng)常出現(xiàn)的問題是對話框被遮罩層擋住,怎么來解決這個問題呢？下面小編給大家?guī)砹薞ue開發(fā)中對話框被遮罩層擋住的問題及解決方法，一起看看吧
在Vue的開發(fā)中，一旦我們用到對話框，經(jīng)常出現(xiàn)的問題是對話框被遮罩層擋住，無論是Element-UI dialog還是bootstrap的Modal，如下圖所示：
造成這個問題的原因是對話框組件的父元素的position有fixed或者relative值，比較簡單易行的辦法如下：對于bootstrap Modal需要添加css語句
.modal-backdrop { z-index: -1;}
而對于Element UI該組件已經(jīng)在屬性層面提供了解決辦法，只要添加:modal-append-to-body="false"就可以了。
總結(jié)
以上所述是小編給大家介紹的解決Vue開發(fā)中對話框被遮罩層擋住的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項目中的public、static及指定不編譯文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue按回車鍵進(jìn)行搜索的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
通過vue.extend實現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過vue.extend實現(xiàn)消息提示彈框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進(jìn)行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下2024-07-07
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
但隨著vue3版本的到來，對typescript的支持度越來越高，tsx語法也被大部分人越來越接收，所以很多項目都是搭配 Vue3 + TS 進(jìn)行的，這篇文章主要介紹了一文掌握在Vue3中書寫TSX的方法,需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于如何通過shell腳本自動生成vue文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了解決VUE的對話框el-dialog點擊外部消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了使用vant的地域控件追加全部選項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最近做的兩個項目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實現(xiàn)一個有趣的圍繞圓弧動畫效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04