解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
問(wèn)題描述：
在IOS設(shè)備上遮罩層顯示在彈出內(nèi)容的上面，導(dǎo)致彈出內(nèi)容不能正常顯示內(nèi)容和響應(yīng)點(diǎn)擊事件
解決方案：
找到該P(yáng)opup組件的祖先DOM節(jié)點(diǎn)是否被設(shè)置該CSS屬性：-webkit-overflow-scrolling: touch;
若被設(shè)置將該CSS屬性，則去掉即可。
補(bǔ)充知識(shí)：完美解決VUX的popup組件滑動(dòng)穿透的問(wèn)題
最近使用vux的popup組件做個(gè)彈窗，在真機(jī)中使用發(fā)現(xiàn)存在滑動(dòng)穿透的問(wèn)題，即在彈出窗滑動(dòng)內(nèi)容，底層的內(nèi)容也會(huì)跟著滑動(dòng)，這種體驗(yàn)很不好。
廢話(huà)不多說(shuō)，直接上解決方法：
核心就是給根div添加固定定位。
具體實(shí)現(xiàn)如下：
<template>
<div id='discounts' :class="{'fixed-touch':showDetail}">
<button @click="showDetail=true">彈出popup組件</button>
// 遮罩層
<div class="overlayer" @touchmove.prevent v-show="showDetail" @click="showDetail=false"></div>
// 這里注意下，要把popup組件的遮罩顯示設(shè)置為false
<popup v-model="showDetail" position="bottom" max-height="80%" should-rerender-on-show :show-mask="false">
<div class="popup-style">彈出框內(nèi)容</div>
</popup>
</div>
</template>
<script>
import { Popup } from 'vux'
export default {
data () {
return {
showDetail: false
}
},
components: {
Popup
}
}
</script>
<style>
.fixed-touch {position: fixed;}
.overlayer{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index: 500;
background-color: #000;
opacity: .5;
}
</style>
按照如上方式便可完美解決vux的popup組件在移動(dòng)端滑動(dòng)穿透的問(wèn)題。
以上這篇解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue?table表格中如何控制下拉框的顯示隱藏問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04
腳手架是一種用于快速開(kāi)發(fā)Vue項(xiàng)目的系統(tǒng)架構(gòu)，這篇文章主要介紹了Vue腳手架實(shí)現(xiàn)試卷頁(yè)面功能，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)
這篇文章主要介紹了vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue 對(duì)象添加或刪除成員時(shí)無(wú)法實(shí)時(shí)更新的解決方法
這篇文章主要介紹了vue 對(duì)象添加或刪除成員時(shí)無(wú)法實(shí)時(shí)更新的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類(lèi)型是一個(gè)函數(shù)，本文通過(guò)完整代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
vue3中vite的@路徑別名與path中resolve實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于vue3中vite的@路徑別名與path中resolve的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue之事件處理的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下。2020-07-07
vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析
這篇文章主要介紹了vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07