" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

去除element-ui中Dialog對話框遮罩層方法詳解

 更新時間：2022年12月20日 11:29:15   作者：愛劃水de鯨魚哥  
這篇文章主要為大家介紹了去除element-ui中Dialog對話框遮罩層方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

本文主要介紹了如何去除 element-ui 中 Dialog 對話框遮罩層的方法，并給出了示例代碼以及頁面效果作為參考。

modal 屬性

在使用element-ui的Dialog時，默認會有遮罩層，想要去除遮罩層，官方文檔給出了 modal 屬性；

modal 是一個布爾值，表示是否需要遮罩層；

然而，將 modal 賦值為 false 時并不生效；

這里官方文檔也給出了提示：

當 modal 的值為 false 時，請一定要確保 append-to-body 屬性為 true，由于 Dialog 使用 position: relative 定位，當外層的遮罩層被移除時，Dialog 則會根據(jù)當前 DOM 上的祖先節(jié)點來定位，因此可能造成定位問題。

由于定位問題，我們還需將 append-to-body 屬性置為 true；

本以為事情就這樣結(jié)束了，然而，事情并不那么簡單，此時遮罩層依然存在；

重點來了，我們還需要使用 v-bind 指令來綁定 modal 屬性，才能將遮罩層去除；

	<el-dialog :modal="false" append-to-body="true"></el-dialog>

至此，我們就成功的去除了 Dialog 對話框的遮罩層，如下是示例代碼。

示例代碼：

<el-button type="text" @click="centerDialogVisible = true"
 >點擊打開 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對話框遮罩層方法詳解的詳細內(nèi)容，更多關于element-ui Dialog遮罩層去除的資料請關注腳本之家其它相關文章！

相關文章

  • 從延遲處理解析JavaScript惰性編程

    從延遲處理解析JavaScript惰性編程

    這篇文章主要為大家介紹了從延遲處理解析JavaScript惰性編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-10-10
  • 使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解

    使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解

    在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設計至關重要,它直接影響到程序的性能和可維護性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下
    2024-09-09
  • 用js生產(chǎn)批量批處理執(zhí)行命令

    用js生產(chǎn)批量批處理執(zhí)行命令

    因為從別的地方弄到了100個廣告代碼，但因為他的里面加入了很多東西，所以需要批量刪除一個文件夾和加入我的網(wǎng)站的快捷方式
    2008-07-07
  • JavaScript 繪制餅圖的示例

    JavaScript 繪制餅圖的示例

    這篇文章主要介紹了JavaScript 繪制餅圖的示例，幫助大家更好的利用JavaScript繪制圖表，感興趣的朋友可以了解下
    2021-02-02
  • JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享

    JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享

    這篇文章主要介紹了JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實現(xiàn)原理,然后給出實現(xiàn)代碼,需要的朋友可以參考下
    2014-12-12
  • 再也不怕 JavaScript 報錯了,怎么看怎么處理都在這兒

    再也不怕 JavaScript 報錯了,怎么看怎么處理都在這兒

    這篇文章主要介紹了再也不怕 JavaScript 報錯了,怎么看怎么處理都在這兒,需要的朋友可以參考下
    2020-12-12
  • js仿京東放大鏡

    js仿京東放大鏡

    這篇文章主要為大家詳細介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • uniapp微信小程序訂閱消息發(fā)送服務通知超詳細教程

    uniapp微信小程序訂閱消息發(fā)送服務通知超詳細教程

    在使用或開發(fā)小程序過程中,我們會發(fā)現(xiàn)消息通知是非常重要的一個環(huán)節(jié),下面這篇文章主要給大家介紹了關于uniapp微信小程序訂閱消息發(fā)送服務通知的相關資料,需要的朋友可以參考下
    2023-06-06
  • js計算任意值之間隨機數(shù)的方法

    js計算任意值之間隨機數(shù)的方法

    這篇文章主要介紹了js計算任意值之間隨機數(shù)的方法,分析了Math.random函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • JavaScript實現(xiàn)HSL拾色器

    JavaScript實現(xiàn)HSL拾色器

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)HSL拾色器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-05-05

最新評論