vue 彈出遮罩層樣式實(shí)例
以前做遮罩層都是寫(xiě)最小高度來(lái)占滿(mǎn)屏，但是總會(huì)出現(xiàn)問(wèn)題，也沒(méi)改變，今天一個(gè)人在交流群上問(wèn)這個(gè)時(shí)，看到一個(gè)回答解決了我這一個(gè)bug，學(xué)到了，現(xiàn)在記錄一下樣式。
<div class='popContainer'></div>
div.popContainer{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
這樣遮罩層就會(huì)占滿(mǎn)屏了
補(bǔ)充知識(shí)：vue 鎖定蒙版 不讓里面頁(yè)面滑動(dòng)
其實(shí)就是一句代碼，在你的蒙版里面添加一句@touchmove.prevent就好了，下面是例子
<!-- 陰影背景層 --> <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>
以上這篇vue 彈出遮罩層樣式實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js?rules校驗(yàn)規(guī)則舉例詳解
Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對(duì)象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳，感興趣的可以了解一下2022-04-04
最近一直在做的項(xiàng)目是Vue2搭建的項(xiàng)目，本文主要介紹了Vue全局自定義指令Modal拖拽的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
v-cloak原理是先通過(guò)樣式隱藏內(nèi)容,然后在內(nèi)存中進(jìn)行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場(chǎng)之后,v-cloak 屬性會(huì)被自動(dòng)去除,本文詳細(xì)介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)
本文主要介紹了Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue實(shí)現(xiàn)全屏滾動(dòng)效果（非fullpage.js）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全屏滾動(dòng)效果，非fullpage.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法
本文主要介紹了el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07