vue3 聊天页面源码

Vue3 聊天页面源码示例如下：

<template>
  <div>
    <div class="chat-container">
      <div v-for="message in messages" :key="message.id" class="message">
        <div>{{ message.sender }}</div>
        <div>{{ message.text }}</div>
        <div class="time">{{ message.time }}</div>
      </div>
    </div>
    <div class="input-container">
      <input v-model="newMessage" type="text" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: "",
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage) {
        const time = new Date().toLocaleTimeString();
        const message = {
          id: new Date().getTime(),
          sender: "User",
          text: this.newMessage,
          time: time,
        };
        this.messages.push(message);
        this.newMessage = "";
      }
    },
  },
};
</script>

<style>
.chat-container {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
}

.time {
  font-size: 12px;
  color: #999;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="text"] {
  padding: 5px;
  margin-right: 5px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

这是一个简单的聊天页面的 Vue3 源码示例。页面包含一个消息容器，用于展示接收和发送的消息，以及一个输入框和发送按钮。用户可以在输入框中输入消息，点击发送按钮后，将消息添加到消息列表中。消息列表会根据添加的消息自动更新。

源码中使用了 Vue3 的数据绑定功能（`v-model`）、列表渲染指令（`v-for`）和事件绑定（`@click`）来实现交互功能。通过绑定输入框的`v-model`指令，实时更新 `newMessage` 的值，从而实现实时输入。点击发送按钮时，调用 `sendMessage` 方法，将新消息添加到 `messages` 数组中，并清空输入框内容。

通过 CSS 样式，对消息容器和输入框进行简单的样式调整，使聊天页面更加友好和美观。

以上是一个简单的 Vue3 聊天页面源码示例，可以作为入门学习使用，具体功能和样式可以根据实际需求进行扩展和调整。