小程序键盘遮盖输入框

使用的van组件，回复框是从下弹出，可以设置盒子高度，也可以设置定位，直接设置盒子高度的话，可以省两行css代码

<!-- 回复评论弹框 -->
    <van-popup 
      :show="handelScreenAddBox"
      position="bottom"
      suctom-style="height: auto"
      @close="handelScreenAddBoxClose"
      catchtouchmove
    >
      <!-- 使用的van组件，回复框是从下弹出，可以设置盒子高度，也可以设置定位，直接设置盒子高度的话，可以省两行css代码 -->
      <div 
        class="addBoxBox" 
        :style="{height:areaBottom + 'px'}"
      >
        <!-- input内需要绑定:adjust-position="false"(键盘弹起时，是否自动上推页面) 然后分别注册个获取焦点和失去焦点事件 -->
        <input 
          @change="(value)=>{newBox = value.mp.detail.value}" 
          :value="newBox"
          :adjust-position="false"
          @focus="areaFocus"
          @blur="areaBlur"
        >
        <div @click="submitAddBoxOrReply">{{replyOrAddKeyWord}}</div>
      </div>
    </van-popup>

js

areaBottom: 60 // data中，areaBottom默认设置60，即盒子高度

areaFocus (e) { // input获取焦点后，让addBoxBox高度增加
  if (this.isX) { // 判断是否为iPhoneX，因为是从底部弹出的，多做20px的适配
    this.areaBottom = e.detail.height + 40 // 键盘的高度+addBoxBox的高度
  } else {
    this.areaBottom = e.detail.height + 60
  }
},
areaBlur () {
  this.areaBottom = 60  // 失去焦点后，让input归位
},

css

.addBoxBox
  width 375px
  padding 12.5px
  background #fff
  box-sizing border-box
  display flex
  justify-content space-between
  input
    width 277px
    height 35px
    background #F4F5FA
    padding 10px 9px
    box-sizing border-box
    font-size 14px
    line-height 15px
    color #252525
    resize none
  div
    width 55px
    height 35px
    border-radius 2px
    background #2361FF
    font-size 13px
    color #ffffff
    line-height 35px
    text-align center