移动端vue中在vant的DropdownMenu弹窗中有一个输入框，获取焦点后，系统键盘弹出，影响布局

问题

移动端vue中在vant的DropdownMenu弹窗中有一个输入框位置比较靠下，滑动到最低位置后，然后获取焦点后，系统键盘出来了，这个弹窗就被顶上去了，有个很大的空隙，输入框就看不到了，并且无法滑动

• 正常：

• 异常：

原因

低位置的输入框获取焦点后，软键盘弹出，剩余高度不够，弹窗被软键盘顶起导致布局错乱。

解决思路

方法	核心思路	优点	缺点	适用场景
阻止键盘弹出	设置输入框为readonly，通过自定义选择器输入	彻底避免键盘影响，体验可控	需要实现自定义选择器界面	日期、选项等非直接文本输入
主动滚动视图	监听键盘弹出，主动滚动输入框到可视区	保持键盘输入能力，兼容性较好	需要精确计算滚动位置	需要直接文本输入的任何场景
动态定位调整	键盘弹出时动态调整弹窗位置	精准控制布局，体验流畅	实现稍复杂，需处理多种情况	对布局控制要求高的场景
整体布局加固	固定弹窗布局，防止被键盘挤压	一劳永逸，无需逐个处理	可能影响其他交互	各种弹窗场景

根据上述4种，试了前两种，第一种OK，第二种没作用。

最简单是第一种(采用虚拟数字键盘)