写一个布局实现流式流出聊天,VUE3+TS

以下是一个使用Vue 3和TypeScript实现流式流出聊天布局的示例代码：

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="message in messages" :key="message.id" class="chat-message" :class="{ 'outgoing': message.outgoing }">
        {{ message.content }}
      </div>
    </div>
    <div class="chat-input">
      <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Type your message..." />
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      messages: [
        { id: 1, content: 'Hello', outgoing: true },
        { id: 2, content: 'Hi', outgoing: false },
        { id: 3, content: 'How are you?', outgoing: true },
      ],
      newMessage: '',
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        this.messages.push({ id: this.messages.length + 1, content: this.newMessage, outgoing: true });
        this.newMessage = '';
      }
    },
  },
});
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: auto;
}

.chat-message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.outgoing {
  background-color: #e2f3ff;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex-grow: 1;
  margin-right: 10px;
}

.chat-input button {
  padding: 5px 10px;
}
</style>

在上面的代码中，我们创建了一个名为`ChatContainer`的组件，它包含了聊天的布局。该组件通过`messages`数组来存储聊天消息，每条消息有一个唯一的`id`、内容`content`和一个表示是否是发送方的`outgoing`属性。

在模板中，我们使用`v-for`指令来遍历`messages`数组，并根据`outgoing`属性为消息添加不同的样式类。聊天消息使用`div`元素进行展示。

聊天输入框位于底部，它包含一个文本输入框和一个发送按钮。我们使用`v-model`指令绑定输入框的值到`newMessage`变量上，并使用`@keydown.enter`监听回车键事件来发送消息。发送消息时，我们将新消息添加到`messages`数组中，并清空输入框的值。

最后，我们使用CSS样式对聊天容器、消息和输入框进行布局和样式设置。`.outgoing`类用于设置发送方消息的背景色。

希望这个示例能帮助你实现流式流出聊天布局！