解决聊天窗口的输入框高度变化，引起中间滚动内容的跳动问题

场景：iphone  类似聊天窗口、有中间可滚动内容divB,输入框高度可以变化

问题：当输入框输入文字高度变化后，如输入了两三行的文字，则中间可滚动内容divB会跳动回到之前一行时的位置。

解决代码如下：通过async  和 await 解决

<template>
  <div class="main">
    <div class="title">标题</div>
    <div ref="container" class="container">
      <div v-for="(item, index) in 100" :key="index" class="item">item{{ index }}</div>
    </div>
    <div class="bottom">
      <van-field
        ref="inputText"
        v-model="inputText"
        class="input"
        rows="1"
        maxlength="1000"
        size="30"
        :autosize=" { maxHeight: 200, minHeight: 26 }"
        label=""
        type="textarea"
        placeholder="请输入..."
        :border="true"
        @focus="fieldFocus"
        @blur="fieldBlur"
      />
    </div>
    <div :style="{height:iosPlaceholderHeight,backgroundColor: '#FFFFFF' }"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      iosPlaceholderHeight: '100px',
      inputText: '',
    };
  },

  computed: {

  },
  watch: {
    inputText: {
      handler(v) {
        if (v.length > 0) {
          this.chatBoxScrollToBottom(false);
        }
      },
      immediate: true
    }
  },
  activated() {

  },

  methods: {
    fieldFocus() {
      this.iosPlaceholderHeight = '400px';
      setTimeout(() => {
        this.chatBoxScrollToBottom(false);
      }, 100);
    },
    fieldBlur() {
      this.iosPlaceholderHeight = '100px';
    },
    // 设置滚动条到最底部
    async chatBoxScrollToBottom(smooth = true) {
      console.log('chatBoxScrollToBottom scrollHeight:', this.$refs.container?.scrollHeight);
      if (!smooth) {
        this.$nextTick(async () => {
          const chatBox = await this.$refs.container;
          chatBox?.scrollTo({ top: chatBox.scrollHeight });
        });
      } else {
        this.$nextTick(async () => {
          const chatBox = await this.$refs.container;
          chatBox?.scrollTo({ top: chatBox.scrollHeight, behavior: 'smooth' });
        });
      }
    },
  },
};
</script>

<style  lang="less" scoped>
.main{
  padding-top: 88px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .title{
    height: 100px;
  }

  .container{
    overflow: scroll;
    flex: 1;
    .item{
      height: 60px;
    }
  }
  .bottom{
    padding-top: 20px;
    background: #F7F8FA;
  }
  .input{
    width: 510px;
    line-height: 50px;
    font-size: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 6px;
    padding-top: 15px;
  }
}
</style>