去除element-ui中Dialog對(duì)話框遮罩層方法詳解
前言
本文主要介紹了如何去除 element-ui 中 Dialog 對(duì)話框遮罩層的方法，并給出了示例代碼以及頁(yè)面效果作為參考。
modal 屬性
在使用element-ui的Dialog時(shí)，默認(rèn)會(huì)有遮罩層，想要去除遮罩層，官方文檔給出了 modal 屬性；
modal 是一個(gè)布爾值，表示是否需要遮罩層；
然而，將 modal 賦值為 false 時(shí)并不生效；
這里官方文檔也給出了提示：
當(dāng) modal 的值為 false 時(shí)，請(qǐng)一定要確保 append-to-body 屬性為 true，由于 Dialog 使用 position: relative 定位，當(dāng)外層的遮罩層被移除時(shí)，Dialog 則會(huì)根據(jù)當(dāng)前 DOM 上的祖先節(jié)點(diǎn)來(lái)定位，因此可能造成定位問(wèn)題。
由于定位問(wèn)題，我們還需將 append-to-body 屬性置為 true；
本以為事情就這樣結(jié)束了，然而，事情并不那么簡(jiǎn)單，此時(shí)遮罩層依然存在；
重點(diǎn)來(lái)了，我們還需要使用 v-bind 指令來(lái)綁定 modal 屬性，才能將遮罩層去除；
<el-dialog :modal="false" append-to-body="true"></el-dialog>
至此，我們就成功的去除了 Dialog 對(duì)話框的遮罩層，如下是示例代碼。
示例代碼：
<el-button type="text" @click="centerDialogVisible = true"
>點(diǎn)擊打開(kāi) Dialog</el-button
>
<el-dialog title="dialog去掉遮罩層" v-model="centerDialogVisible" width="30%" center :modal="false" append-to-body="true">
<span>注意：modal需要用v-bind指令綁定</span>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="centerDialogVisible = false"
>確定</el-button>
</span>
</template>
</el-dialog>以上就是去除element-ui中Dialog對(duì)話框遮罩層方法詳解的詳細(xì)內(nèi)容，更多關(guān)于element-ui Dialog遮罩層去除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript 中iframe高度自適應(yīng)（同域）實(shí)例詳解
這篇文章主要介紹了javascript 中iframe高度自適應(yīng)（同域）實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了詳解微信小程序軌跡回放實(shí)現(xiàn)及遇到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
使用uni-app開(kāi)發(fā)微信小程序的實(shí)現(xiàn)
這篇文章主要介紹了使用uni-app開(kāi)發(fā)微信小程序的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問(wèn)題
這篇文章主要介紹了如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問(wèn)題。SyntheticEvent對(duì)象是通過(guò)合并得到的。 這意味著在事件回調(diào)被調(diào)用后，SyntheticEvent 對(duì)象將被重用并且所有屬性都將被取消。 因此，您無(wú)法以異步方式訪問(wèn)該事件。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了淺談JavaScript中的“!!”作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
javascript強(qiáng)大的日期函數(shù)代碼分享
這篇文章介紹了javascript強(qiáng)大的日期函數(shù)代碼，有需要的朋友可以參考一下2013-09-09
JavaScript JSON數(shù)據(jù)處理全集(小結(jié))
這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
uploadify在Firefox下丟失session問(wèn)題的解決方法
在用uploadify上傳插件時(shí)遇到了一個(gè)問(wèn)題，在讀session時(shí)認(rèn)為沒(méi)有權(quán)限而被攔截了，后來(lái)在后臺(tái)打印登錄時(shí)產(chǎn)生session的id和上傳時(shí)讀取session的id，解決方法如下，感興趣的朋友可以了解下2013-08-08
這篇文章主要介紹了javascript放大鏡效果，照著別人的例子，自己試著做了個(gè)放大鏡效果，感興趣的小伙伴們可以參考一下2015-12-12
現(xiàn)代 javscript 編程 資料...2007-04-04