vux 中popup 组件的Mask 遮罩在最上层的解决方法？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
问题描述：
在IOS设备上遮罩层显示在弹出内容的上面，导致弹出内容不能正常显示内容和响应点击事件
解决方案：
找到该Popup组件的祖先DOM节点是否被设置该CSS属性：-webkit-overflow-scrolling: touch;
若被设置将该CSS属性，则去掉即可。
补充知识：完美解决VUX的popup组件滑动穿透的问题
最近使用vux的popup组件做个弹窗，在真机中使用发现存在滑动穿透的问题，即在弹出窗滑动内容，底层的内容也会跟着滑动，这种体验很不好。
废话不多说，直接上解决方法：
核心就是给根div添加固定定位。
具体实现如下：
计算
安全
数据库
网络和加速
企业服务
<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 遮罩在最上层的解决方法的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
