vue?element如何添加遮罩層
更新時(shí)間：2024年03月09日 08:33:00 作者：sqwu
這篇文章主要介紹了vue?element如何添加遮罩層問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue element添加遮罩層
el-dialog自帶有遮罩層，但在:modal=“true” :modal-append-to-body=“true” 等設(shè)置都沒(méi)有效果的情況下，考慮自己加一個(gè)遮罩層吧
添加html,div里面可以添加文字或圖片
<div v-if="showModal" class="mask">
<img class="loading-image" src="../../image/loading.gif" alt="正在處理，請(qǐng)等待。。。">
<!-- <span class="mask-text">處理中，請(qǐng)等待...</span> -->
</div>
設(shè)置css樣式
.mask {
background-color: rgb(0, 0, 0);
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
在要展示的時(shí)候?qū)howModal值設(shè)為true就行
在對(duì)話(huà)框打開(kāi)的時(shí)候，如果遮罩層在對(duì)話(huà)框底下，f12看一下對(duì)話(huà)框自帶的遮罩層的z-index值是多少：
步驟一
步驟二
這就是自帶遮罩層的z-index值
所以手動(dòng)添加的遮罩層z-index要大于2026，值越大的遮罩層在越上層
步驟三
所以將mask樣式的z-index改大
.mask {
background-color: rgb(0, 0, 0);
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000
}
這樣就可以正常顯示了，
效果如下圖：
推薦一個(gè)很好可以自定義加載中的動(dòng)圖的網(wǎng)站https://loading.io/
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中路由傳參query、params及動(dòng)態(tài)路由傳參詳解
vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關(guān)于vue3中路由傳參query、params及動(dòng)態(tài)路由傳參的相關(guān)資料,需要的朋友可以參考下2022-09-09
如何寫(xiě)好一個(gè)vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
這篇文章主要介紹了如何寫(xiě)好一個(gè)vue組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場(chǎng)景和具體用法,通過(guò)本文的介紹,我們可以看到,setup函數(shù)是用來(lái)將組件的狀態(tài)和行為進(jìn)行分離的一個(gè)重要工具,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue自定義實(shí)現(xiàn)一個(gè)消息通知組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要介紹了Vuex中mutations的用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配
文章介紹了如何使用Vue和Electron開(kāi)發(fā)桌面端應(yīng)用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運(yùn)行和打包應(yīng)用等步驟,并分享了一些常見(jiàn)的打包錯(cuò)誤及其解決方法,感興趣的朋友一起看看吧2025-01-01
使用Vue簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁(yè)組件
上拉加載更多的分頁(yè)功能大家應(yīng)該都見(jiàn)過(guò)或者使用過(guò)了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過(guò)嗎,本文我們來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè)上拉加載更多分頁(yè)組件吧2024-11-11
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08