关于小程序引用Vant中下拉菜单DropdownMenu的遮罩层Bug

写在前面

做了一个原生小程序项目，设计图是将一个筛选放在了整个页面的中间，当然为了方便我选择了引用组件，查看了一下比较主流的小程序组件，发现Vant比较适合我的需求，于是就引用了Vant，怎么引用这里不做详细说明，接下来说一下遇到的问题，以及本人的新路历程和解决方法。

发现Bug

在引用Vant组件一直到看官方示例文档，期间都很顺利，实现效果也很满意，就当我以为这个问题即将结束的时候，新的问题出现了。下拉菜单放到中间位置，上方没有遮罩，这个时候滑动上方的部分，整个内容都会跟着滚动，然而我们引用的下拉菜单却还是停在原来的位置。查看样式发现弹出的菜单是用的fixed定位，就导致了菜单栏的位置就决定而且固定了弹出菜单的位置。为了解决这个问题，我也尝试过寻找其根部的定位样式着手修改，当然修改后的样式还是不尽人意，也有可能是我改的代码不对，总之就不了了之，搁置了几天。

后来项目总体快要结束的时候，回过头来再完善功能修改Bug的时候，突然想起来这个地方还没有解决，于是回过头来继续审查这个问题。在我经历了多次思想斗争之后，还是决定引用组件，放弃手撸。既然决定手撸就要找找问题的解决办法，下拉菜单弹出后，不会根据用户滑动屏幕而滚动，那么我可以将屏幕固定住，不让用户来滑动屏幕。而且下拉的遮罩是只有下拉菜单下面的部分才有遮罩，上方并没有遮罩，如果说将这个下拉菜单设计到屏幕的上方就完全用不着考虑解决不跟随滑动这个问题了。根据这个思路，我想添加一个遮罩层，并且让遮罩层下方禁止滚动，让弹出的菜单显示在遮罩层的上方，这样或许能解决这个问题。

 解决方法

有了这个思路之后，便开始实施，Vant官方也有点击执行方法的示例，点击之后打开遮罩层，选择完之后关闭遮罩层，这样的话某种意义上限制了用户的自由性，也就是说用户不选择就无法关闭遮罩层，如果给遮罩层添加点击关闭事件的话，那么菜单会继续留在屏幕上面，而官方并没有给出关闭的示例，所以原本我考虑的点击遮罩层关闭的方案被Pass了。第二个，遮罩层我也用的fixed，满屏幕，这样的话，遮罩层和组件弹出的遮罩层重叠会变得更黑，看起来不自然，但是如果不用官方给的遮罩层，弹出的菜单下方又出现了可以滑动的现象，所以遮罩层不能用fixed，也不能铺满屏幕，最优的解决方案为给遮罩层一个高度，一直到完全覆盖下拉菜单dropdown-menu，不能覆盖弹出菜单。第三就是调成遮罩层颜色和透明度接近Vant官方给的遮罩层的颜色就可以了。

总体来讲这个实现方式显得笨而且麻烦，但是既然引用组件了，出现问题能补则补吧，运行只要不出大问题，得过且过吧。

部分代码

DropdownItem Events

事件名	说明	回调参数
change	点击选项导致 value 变化时触发	value
open	打开菜单栏时触发	-
close	关闭菜单栏时触发	-
opened	打开菜单栏且动画结束后触发	-
closed	关闭菜单栏且动画结束后触发	-

官方给定的一些事件，打开和关闭遮罩层会用得到，要应用到dropdown-item上

DropdownMenu Props

参数	说明	类型	默认值
active-color	菜单标题和选项的选中态颜色	string	#ee0a24
z-index	菜单栏 z-index 层级	number	10
duration	动画时长，单位毫秒	number	200
direction	菜单展开方向，可选值为 up	string	down
overlay	是否显示遮罩层	boolean	true
close-on-click-overlay	是否在点击遮罩层后关闭菜单	boolean	true
close-on-click-outside	是否在点击外部 menu 后关闭菜单	boolean	true

这部分是用得到是否显示遮罩和层级的事件，应用到dropdown-menu上

禁止滚动

最后就是遮罩层下方禁止滚动的属性了

catchtouchmove="preventTouchMove" 

其他的点击打开遮罩层关闭遮罩层等小方法就自行思考逻辑吧，我只能提供思路给大家，如果大家有更好的解决方案，欢迎留言，有不正确的地方还请多多指教