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

你可以在发送消息后，通过以下步骤来将滚动条滚动到最底部：

1. 获取聊天框元素的引用（例如使用 `ref`）。
2. 在发送消息后，等待 DOM 更新（可以使用 `nextTick`）。
3. 将聊天框元素的 `scrollTop` 属性设置为其 `scrollHeight` 属性的值。

示例代码如下：

<template>
  <div class="chat-box" ref="chatBox">
    <!-- 聊天消息列表 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick } from 'vue';

export default defineComponent({
  setup() {
    const chatBox = ref<HTMLElement | null>(null);

    function sendMessage() {
      // 发送消息的逻辑

      // 等待 DOM 更新
      nextTick(() => {
        // 滚动到底部
        chatBox.value!.scrollTop = chatBox.value!.scrollHeight;
      });
    }

    return {
      chatBox,
      sendMessage,
    };
  },
});
</script>

在上面的代码中，我们使用了 `ref` 来获取聊天框元素的引用，并在发送消息后等待 DOM 更新。然后，我们将聊天框元素的 `scrollTop` 属性设置为其 `scrollHeight` 属性的值，以将滚动条滚动到最底部。请注意，在设置 `scrollTop` 属性之前，我们需要确保 `chatBox` 引用不为 `null`，因此在代码中使用了非空断言操作符 `!`。