vue3 聊天机器人 聊天界面

要实现一个基本的Vue 3聊天界面，你可以使用Vue的组合式API（Composition API）来构建。以下是一个简单的聊天界面示例，包括发送消息和显示消息的功能。

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <form @submit.prevent="sendMessage">
      <input v-model="newMessage" type="text" placeholder="输入消息" />
      <button type="submit">发送</button>
    </form>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const messages = ref([]);
    const newMessage = ref('');
 
    function sendMessage() {
      if (newMessage.value.trim()) {
        messages.value.push({
          id: Date.now(),
          content: newMessage.value,
        });
        newMessage.value = '';
      }
    }
 
    return { messages, newMessage, sendMessage };
  },
};
</script>
 
<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 500px;
  overflow: hidden;
}
 
.chat-messages {
  flex: 1;
  overflow-y: scroll;
  padding: 10px;
}
 
.message {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  width: calc(100% - 20px);
}
 
.message-content {
  overflow-wrap: break-word;
}
 
input, button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  margin: 10px 0;
}
 
input {
  flex: 1;
}
</style>

这个例子使用了Vue 3的Composition API，其中setup函数是组件的核心。它使用ref来创建响应式数据，例如messages和newMessage。sendMessage函数处理发送消息的逻辑，将新消息推入messages数组，并清空输入框。

在<template>部分，你可以看到一个循环显示messages数组中的每条消息，以及一个表单，用户可以在其中输入消息并提交。提交表单时，会触发sendMessage函数。

这个例子简单易懂，但不包括实际的聊天机器人集成。你需要根据实际需求，将消息发送至聊天机器人，并从聊天机器人接收回复，然后更新消息列表。