解決vux 中popup 組件Mask 遮罩在最上層的問題
更新時間：2020年11月03日 10:54:01 作者：yanwosky4
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：
在IOS設備上遮罩層顯示在彈出內容的上面，導致彈出內容不能正常顯示內容和響應點擊事件
解決方案：
找到該Popup組件的祖先DOM節(jié)點是否被設置該CSS屬性：-webkit-overflow-scrolling: touch;
若被設置將該CSS屬性，則去掉即可。
補充知識：完美解決VUX的popup組件滑動穿透的問題
最近使用vux的popup組件做個彈窗，在真機中使用發(fā)現(xiàn)存在滑動穿透的問題，即在彈出窗滑動內容，底層的內容也會跟著滑動，這種體驗很不好。
廢話不多說，直接上解決方法：
核心就是給根div添加固定定位。
具體實現(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組件的遮罩顯示設置為false
<popup v-model="showDetail" position="bottom" max-height="80%" should-rerender-on-show :show-mask="false">
<div class="popup-style">彈出框內容</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組件在移動端滑動穿透的問題。
以上這篇解決vux 中popup 組件Mask 遮罩在最上層的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
使用vue深度選擇器修改ElementUI組件內樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預處理器，能正常使用，但是在scss預處理器中會報錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 使用monaco實現(xiàn)代碼高亮的方法，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue.js中的refs屬性是一個非常有用的特性,它允許我們在組件中操作 DOM 元素和組件實例,本文來介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vue路由跳轉傳參或者打開新頁面跳轉問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了vue組件中重新渲染的3種方式小結,主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價值,感興趣的可以了解一下2023-10-10
在vue中，有時候你需要對data中的數據進行處理，或者對抓取的數據進行處理之后再掛載呈現(xiàn)到標簽中，這時候你就需要計算屬性了，當然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋2023-02-02
Vue的組件化給前端開發(fā)帶來極大的便利,下面這篇文章主要給大家介紹了關于Vue子父組件之間傳值的三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue3中使用scss加上scoped導致樣式失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.js如何在網頁中實現(xiàn)一個金屬拋光質感的按鈕
這篇文章主要給大家介紹了關于vue.js如何在網頁中實現(xiàn)一個金屬拋光質感的按鈕的相關資料,文中給出了詳細的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue之創(chuàng)建項目及目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11