移动端vue3弹起键盘不收回

在移动端使用 Vue3 开发过程中，有时会遇到输入框（比如 `v-model` 绑定的 `<input>` 或者第三方库的文本组件）当焦点获取到时，虚拟键盘弹出但是不会自动收起的问题。这通常是由于浏览器的行为或者是某些 CSS 的影响。

解决这个问题的方法有：

1. **手动处理**: 使用 JavaScript 监听输入框的 `focus` 和 `blur` 事件，当失去焦点时主动调用键盘隐藏的 API，如在 iOS 中可以尝试 `document.activeElement.blur()`。在 Vue 中，你可以这样做：

<template>
  <div>
    <input ref="inputField" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  mounted() {
    this.$refs.inputField.addEventListener('focus', () => {
      // 当聚焦时，开始监听键盘收起
      document.body.addEventListener('touchmove', this.handleBodyMove);
    });
    this.$refs.inputField.addEventListener('blur', () => {
      // 当失焦时，移除键盘收起的监听并隐藏键盘
      document.body.removeEventListener('touchmove', this.handleBodyMove);
      this.hideKeyboard();
    });
  },
  methods: {
    hideKeyboard() {
      if (window.navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
        const keyboardHeight = window.innerHeight - document.documentElement.clientHeight;
        if (keyboardHeight > 0) {
          window.scrollTo(0, -keyboardHeight);
        }
      } else {
        // 可能需要针对其他平台做适配
      }
    },
    handleBodyMove(e) {
      e.preventDefault(); // 阻止默认的滚动行为
    },
  },
};
</script>

2. **使用第三方库**: 如果你在项目中使用了像 Element UI、Vuetify 等库，它们通常提供了一些内置的方法来处理键盘问题。

**相关问题--:**
1. 是否可以使用 Vue 自带的生命周期钩子解决此问题？
2. 除了 touchmove，还有哪些事件可用于检测键盘状态？
3. 这种解决方案是否会影响页面的性能？