vant 软键盘_移动端页面输入底部被软键盘遮挡问题

这个问题通常可以通过监听软键盘的打开和关闭事件来解决。可以使用 Vue.js 的 `$nextTick()` 方法和 `window.innerHeight` 属性来获取页面高度和视口高度。具体实现步骤如下：

1. 在 `mounted()` 钩子函数中，添加软键盘打开和关闭事件的监听函数。

mounted() {
  window.addEventListener('resize', this.handleResize)
  window.addEventListener('scroll', this.handleScroll)
  window.addEventListener('focusin', this.handleFocusIn)
  window.addEventListener('focusout', this.handleFocusOut)
}

2. 实现监听函数，根据软键盘的状态计算页面高度和视口高度，并更新页面的滚动位置。

methods: {
  handleResize() {
    if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
      this.isKeyboardOpened = true
    } else {
      this.isKeyboardOpened = false
    }
    this.updateViewportHeight()
  },
  handleScroll() {
    if (!this.isKeyboardOpened) return
    this.updateViewportHeight()
  },
  handleFocusIn() {
    this.isKeyboardOpened = true
    this.updateViewportHeight()
  },
  handleFocusOut() {
    this.isKeyboardOpened = false
    this.updateViewportHeight()
  },
  updateViewportHeight() {
    const height = window.innerHeight
    const input = this.$refs.input
    const inputHeight = input.offsetHeight
    const inputOffsetTop = input.getBoundingClientRect().top
    const offset = window.scrollY
    const scrollHeight = document.body.scrollHeight
    const keyboardHeight = height - inputHeight - inputOffsetTop + offset
    if (keyboardHeight > 0) {
      document.body.style.height = scrollHeight + keyboardHeight + 'px'
      document.body.style.overflow = 'hidden'
      window.scrollTo(0, keyboardHeight)
    } else {
      document.body.style.height = ''
      document.body.style.overflow = ''
      window.scrollTo(0, 0)
    }
  }
}

3. 在页面中添加输入框，并绑定 ref 属性。

<template>
  <div>
    <input type="text" ref="input">
  </div>
</template>

这样，当软键盘打开时，页面会自动调整滚动位置，避免输入框被遮挡。