2022/04/13 小程序vant-popup覆盖原生组件input

背景
popup弹窗下面有input，唤醒弹窗后，在弹窗操作，还能够点到input唤醒键盘输入文字
效果如下

原因
原生组件的层级过高，vant-popup遮挡不了

解决措施尝试
1.在vant-popup上设置层级，无效

2.使用微信小程序组件 cover-view，样式失效
参考

之前在弹框中写的样式，失效，效果不对

3.设置状态，弹框弹起时，隐藏input，弹框关闭，显示input。成功
参考思路
a.

b.

c.

解决方案：
最开始用弹框modal的显隐值来控制效果，发现从下到上有过渡效果这种弹窗，刚开始弹起，input就消失了，这样用户体验不佳

可以在弹出框的事件中做处理，这样效果要好一些
代码如下：

bug
这种弹框高度不高的暂时不知道怎么处理

更新
方法4:
思路，popup弹框弹起，将页面所有输入值设置disabled，弹框关闭后，再恢复disabled属性。这样在点击的时候不会有穿透效果。
高度不够的弹窗bug也能解决。

参考代码
1.用一个统一变量来控制页面所有输入框的可输入状态

2.js文件，在弹框的事件中进行设置