vue解决安卓手机软键盘弹出,页面高度被顶起

在进行聊天界面开发的时候，发现安卓手机键盘会把界面顶起，但是不会收回来，在网上找到了这个方法解决

const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
            window.onresize = ()=>{
                return(()=>{
                    //键盘弹起与隐藏都会引起窗口的高度发生变化
                    const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
                    console.log("进入到判断页面高度=========");
                    console.log("页面初始高度========="+originalHeight);
                    console.log("软键盘弹起高度========="+resizeHeight);
                    if(resizeHeight-0

之前我是在mounted中根据document.activeElement.tagName的值判断是否为INPUT去改变键盘弹起的高度

window.addEventListener("resize", () => {
                if (document.activeElement.tagName === "INPUT") {
                    
                }
            });

但是在下方加了一个按钮之后，发现点击语音按钮后再切换到输入框，

WechatIMG15.jpeg

document.activeElement.tagName的值变成BODY了，查找资料发现

document.activeElement仅对input、textarea等标准的输入文本有效；对于div等非编辑类的元素(即使开启了contentEditable)，返回的值为BODY。

所以此方法在点击语音后再也调用不起来，困扰了一天的问题，记录一下