vue中使用vant组件出现软键盘顶起页面——导致事件失效

vue中使用vant地址组件页面被顶起问题

遇到问题

• IOS设备，当前发现有7Plus、iphone11【测试机有限，更新版本设备未测】

• 在vue页面中使用vant地址组件， 当操作到详细地址时，软键盘顶起页面往上移动。

• 当软键盘关闭时，页面没有还原。

• 操作页面点击事件时无效，【因页面移动导致位置不对】

复现效果图

1. 输入收货人时页面展示正常
2. 当操作详细地址时会发现，软键盘顶起页面往上移动， 导致事件失效及操作不准确。

解决方法

在需要使用页面的created()生命周期中添加以下代码

import { iosInputHandle } from '@/api/commonApi';

created() {
    iosInputHandle();
}

export const iosInputHandle = () => {
    // 判断是否是ios
    var ua = navigator.userAgent;
    if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        let flag = false
        let pageBackNormFunc
        document.body.addEventListener('focusin', () => {
            // 软键盘弹起事件
            flag = true
            pageBackNormFunc && clearTimeout(pageBackNormFunc)
        })
        document.body.addEventListener('focusout', () => {
            // 软键盘关闭事件
            if (flag) {
                pageBackNormFunc = setTimeout(function () { 
                    // 当键盘收起的时候让页面回到原始位置
                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) 
                }, 200)
            }
            flag = false
        })
    }
}

感谢大神们