Vue3 + ts 聊天框发送消息滚动条在最底部

可以使用 `ref` 和 `$nextTick` 来实现在发送消息后滚动条自动滚动到最底部的效果。

首先需要给聊天框的容器元素加上一个 `ref`，例如：

<div class="chat-box" ref="chatBox">
  <!-- 聊天内容 -->
</div>

然后在发送消息的方法中，先将新消息添加到聊天内容数组中，再在 `$nextTick` 中设置滚动条到底部，例如：

import { ref, onMounted, onUpdated } from 'vue';

export default {
  setup() {
    const chatBox = ref(null); // 定义 chatBox ref

    const messages = ref(['消息1', '消息2']); // 聊天内容数组

    const sendMessage = (message: string) => {
      messages.value.push(message); // 添加新消息
      chatBox.value.scrollTop = chatBox.value.scrollHeight; // 设置滚动条到底部
    };

    onMounted(() => {
      chatBox.value.scrollTop = chatBox.value.scrollHeight; // 组件挂载时滚动条也要在底部
    });

    onUpdated(() => {
      chatBox.value.scrollTop = chatBox.value.scrollHeight; // 聊天内容更新时也要滚动到底部
    });

    return {
      chatBox,
      messages,
      sendMessage,
    };
  },
};

上面的代码中，`onMounted` 和 `onUpdated` 都会在聊天内容更新后被触发，通过设置 `scrollTop` 来让滚动条滚动到底部。

注意，需要在 `nextTick` 中设置滚动条，因为只有在 DOM 更新后才能获取到正确的 `scrollHeight` 值。