聊天室系统的设计与实现：Vue前端篇

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <!-- 聊天信息列表 -->
      <ChatMessage
        v-for="message in messages"
        :key="message.id"
        :message="message"
      />
    </div>
    <form @submit.prevent="sendMessage">
      <input
        v-model="newMessage"
        type="text"
        placeholder="输入消息"
      />
      <button type="submit">发送</button>
    </form>
  </div>
</template>
 
<script>
import ChatMessage from './ChatMessage.vue';
 
export default {
  components: {
    ChatMessage
  },
  data() {
    return {
      messages: [], // 存储聊天信息的数组
      newMessage: '' // 用户输入的新消息
    };
  },
  methods: {
    sendMessage() {
      // 发送消息的逻辑，通常需要调用后端API
      if (this.newMessage) {
        const message = {
          id: Date.now(),
          content: this.newMessage,
          user: '你' // 假设当前用户为'你'
        };
        this.messages.push(message);
        this.newMessage = '';
      }
    }
  }
};
</script>
 
<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
}
input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}
button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}
</style>

这个简单的Vue组件展示了一个基本的聊天输入框和消息列表。用户输入的消息可以通过表单提交，并且通过sendMessage方法添加到messages数组中，以便它们可以在页面上显示。样式使用了CSS Flexbox布局，并且可以容纳无限制数量的消息而不需要滚动条。这个例子教会开发者如何在Vue应用中创建一个基本的聊天组件。