最近开发项目时，发现u-dropdown有遮挡层挡住整个页面，在部分手机上使筛选以外区域无法上拉，争对这问题，网上有些方法是进入u-dropdown组件中进行原始修改；这里给大家讲一个在组件外，解决此问题的方法。代码如下：
<template>
<view :class="'menu-box '+(isShowMask?'':'hide')">
<u-dropdown menu-icon='arrow-down' @open="openEvent" @close="closeEvent">
...
</u-dropdown>
</view>
</template>
<script>
export default {
data(){
return {
isShowMask: false
}
},
methods: {
//下拉选项打开时
openEvent(){
this.isShowMask = true;
},
//下拉选项关闭时
closeEvent(){
this.isShowMask = false;
},
}
}
</script>
<style lang="scss" scoped>
.menu-box{
&.hide{
/deep/ .u-dropdown__content{ display: none; }
}
}
</style>
