移动端解决软键盘弹出时底部fixed定位被顶上去的问题

移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue解决办法。

import Vue from "vue";

export const EventBus = new Vue();
const judgeDeviceType = function () {
  var ua = window.navigator.userAgent.toLocaleLowerCase();
  var isIOS = /iphone|ipad|ipod/.test(ua) || window.__wxjs_is_wkwebview;
  var isAndroid = /android/.test(ua);
  return {
    isIOS: isIOS,
    isAndroid: isAndroid,
  };
};

const isInputElement = function (e) {
  return e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA";
};

window.addEventListener(
  "focus",
  (e) => {
    if (isInputElement(e)) {
      EventBus.$emit("focus");
    }
  },
  true
);

window.addEventListener(
  "blur",
  (e) => {
    if (isInputElement(e)) {
      EventBus.$emit("blur");
    }
  },
  true
);

window.addEventListener("resize", () => {
  EventBus.$emit("resize");
});

Vue.directive("safe-area-inset-fixed", {
  bind: function (el) {
    const value = el.style.display;
    const DeviceType = judgeDeviceType();
    if (DeviceType.isIOS) {
      EventBus.$on("focus", () => {
        el.style.display = "none";
      });
      EventBus.$on("blur", () => {
        el.style.display = value;
      });
    } else {
      let docmHeight = window.innerHeight; //默认屏幕高度
      let realHeight = 0; //实时屏幕高度
      let showFooter = true; //显示底部fixed

      EventBus.$on("resize", () => {
        realHeight = window.innerHeight;
        if (docmHeight > realHeight) {
          showFooter = false;
        } else {
          showFooter = true;
        }

        el.style.display = showFooter ? value : "none";
        console.log("safe-area-inset-fixed", docmHeight, realHeight, "resize");
      });
    }
  },
  unbind() {
    const DeviceType = judgeDeviceType();
    if (DeviceType.isIOS) {
      EventBus.$off("focus");
      EventBus.$off("blur");
    } else {
      EventBus.$off("resize");
    }
  },
});