去除element-ui中Dialog對(duì)話框遮罩層方法詳解
前言
本文主要介紹了如何去除 element-ui 中 Dialog 對(duì)話框遮罩層的方法，并給出了示例代碼以及頁面效果作為參考。
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)來定位，因此可能造成定位問題。
由于定位問題，我們還需將 append-to-body 屬性置為 true；
本以為事情就這樣結(jié)束了，然而，事情并不那么簡(jiǎn)單，此時(shí)遮罩層依然存在；
重點(diǎn)來了，我們還需要使用 v-bind 指令來綁定 modal 屬性，才能將遮罩層去除；
<el-dialog :modal="false" append-to-body="true"></el-dialog>
至此，我們就成功的去除了 Dialog 對(duì)話框的遮罩層，如下是示例代碼。
示例代碼：
<el-button type="text" @click="centerDialogVisible = true"
>點(diǎn)擊打開 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惰性編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2024-09-09
因?yàn)閺膭e的地方弄到了100個(gè)廣告代碼，但因?yàn)樗睦锩婕尤肓撕芏鄸|西，所以需要批量刪除一個(gè)文件夾和加入我的網(wǎng)站的快捷方式2008-07-07
這篇文章主要介紹了JavaScript 繪制餅圖的示例，幫助大家更好的利用JavaScript繪制圖表，感興趣的朋友可以了解下2021-02-02
JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實(shí)現(xiàn)原理,然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-12-12
再也不怕 JavaScript 報(bào)錯(cuò)了,怎么看怎么處理都在這兒
這篇文章主要介紹了再也不怕 JavaScript 報(bào)錯(cuò)了,怎么看怎么處理都在這兒,需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
uniapp微信小程序訂閱消息發(fā)送服務(wù)通知超詳細(xì)教程
在使用或開發(fā)小程序過程中,我們會(huì)發(fā)現(xiàn)消息通知是非常重要的一個(gè)環(huán)節(jié),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了js計(jì)算任意值之間隨機(jī)數(shù)的方法,分析了Math.random函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)HSL拾色器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05