vue element 移动端 点击输入框软键盘弹出，页面布局更改，关闭键盘后，布局没回弹

这周做了一个移动端页面，部署上去发现，只要输入框点击输入消息，布局就会被顶上去，底部栏按钮在键盘关闭后也无法回到原来位置，我这里中间的内容区做了动态设置高度，所以就只需要在软键盘关闭后重新调用计算高度的方法即可。需要注意的是安卓和ios软键盘关闭的时机是不一样的，安卓直接在resize事件里，而ios则在输入框失去焦点键盘关闭，具体代码如下

  handleWidth() {
      // 判断设备类型
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      console.log(isiOS, "isiOS");
      // 如果是IOS设备
      if (isiOS) {
        // 失焦后，键盘关闭
        document.body.addEventListener("focusout", () =>
          this.getTableContentHeight()
        );
      } else
        window.addEventListener("resize", () => this.getTableContentHeight());
    },
   // 高度自适应
    getTableContentHeight() {
      let drawerBodyDom = document.querySelector(".el-drawer__body");
      let drawerH = parseFloat(
        window.getComputedStyle(drawerBodyDom, null).height
      );
      let searchDom = document.querySelector(
        ".el-row--flex.is-justify-space-between"
      );
      let searchH = parseFloat(
        window.getComputedStyle(searchDom, null).height
      );

      let pageDom = document.querySelector(".el-drawer__body .el-pagination");
      if (pageDom) {
        this.pageH = parseFloat(
          window.getComputedStyle(pageDom, null).height
        );
      }
      let btnDom = document.querySelector(".drawer__footer");
      let btnH = parseFloat(window.getComputedStyle(btnDom, null).height);
      this.tableContentHeight =
        drawerH - searchH - btnH- this.pageH;
    },