使用的van組件，回復(fù)框是從下彈出，可以設(shè)置盒子高度，也可以設(shè)置定位，直接設(shè)置盒子高度的話，可以省兩行css代碼

<!-- 回復(fù)評(píng)論彈框 -->
    <van-popup 
      :show="handelScreenAddBox"
      position="bottom"
      suctom-style="height: auto"
      @close="handelScreenAddBoxClose"
      catchtouchmove
    >
      <!-- 使用的van組件，回復(fù)框是從下彈出，可以設(shè)置盒子高度，也可以設(shè)置定位，直接設(shè)置盒子高度的話，可以省兩行css代碼 -->
      <div 
        class="addBoxBox" 
        :style="{height:areaBottom + 'px'}"
      >
        <!-- input內(nèi)需要綁定:adjust-position="false"(鍵盤彈起時(shí)，是否自動(dòng)上推頁面) 然后分別注冊(cè)個(gè)獲取焦點(diǎn)和失去焦點(diǎn)事件 -->
        <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默認(rèn)設(shè)置60，即盒子高度

areaFocus (e) { // input獲取焦點(diǎn)后，讓addBoxBox高度增加
  if (this.isX) { // 判斷是否為iPhoneX，因?yàn)槭菑牡撞繌棾龅?，多?0px的適配
    this.areaBottom = e.detail.height + 40 // 鍵盤的高度+addBoxBox的高度
  } else {
    this.areaBottom = e.detail.height + 60
  }
},
areaBlur () {
  this.areaBottom = 60  // 失去焦點(diǎn)后，讓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