vue2 添加聊天组件

要添加聊天组件，你可以按照以下步骤进行操作：

1. 安装 Vue.js 和 Vue CLI。
2. 创建一个新的 Vue 项目，可以使用 Vue CLI 进行创建。
3. 安装一个适合你的聊天组件，例如 Element UI、Vuetify 等。
4. 在你的组件中引入聊天组件，并按照文档进行配置和使用。
5. 根据你的需求进行样式和逻辑的定制。

以下是一个简单的聊天组件的示例：

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <p class="message-content">{{ message.content }}</p>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="请输入消息" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage) {
        this.messages.push({
          content: this.newMessage,
          timestamp: new Date()
        })
        this.newMessage = ''
      }
    }
  }
}
</script>

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

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

.message {
  margin: 10px;
}

.message-content {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}

.chat-input {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.chat-input input {
  width: 80%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
}

.chat-input input:focus {
  outline: none;
  border-bottom: 2px solid #007aff;
}
</style>

在这个示例中，我们使用了一个简单的消息列表和一个输入框来实现聊天功能。你可以根据你的需求修改样式和逻辑。