vue?element如何添加遮罩層
更新時(shí)間：2024年03月09日 08:33:00 作者：sqwu
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue element添加遮罩層
el-dialog自帶有遮罩層，但在:modal=“true” :modal-append-to-body=“true” 等設(shè)置都沒有效果的情況下，考慮自己加一個(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ì)話框打開的時(shí)候，如果遮罩層在對(duì)話框底下，f12看一下對(duì)話框自帶的遮罩層的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.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3+Element Plus進(jìn)行圖片加載優(yōu)化全攻略
在Web開發(fā)中,未優(yōu)化的圖片會(huì)導(dǎo)致很多問題,本文將為大家介紹一下Vue3如何通過Element Plus進(jìn)行圖片加載優(yōu)化,希望對(duì)大家有所幫助2025-03-03
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
最近遇到這樣的需求點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)砹藇ue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11
詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑
這篇文章主要介紹了詳解mpvue中使用vant時(shí)需要注意的onChange事件的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vuex入門到上手教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
下面小編就為大家分享一篇使用use注冊(cè)Vue全局組件和全局指令的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在前端調(diào)用海康威視攝像頭的過程中,主要涉及到攝像頭的連接、視頻流的獲取以及前端頁面的展示,這篇文章主要介紹了前端接入?？低晹z像頭的3種方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
本篇文章主要介紹了vue2 前端搜索實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03