vue模拟微信聊天界面和机器人左右两侧对话的代码

下面是一个简单的 Vue 组件，可以模拟微信聊天界面和机器人左右两侧对话：

<template>
  <div class="chat-container">
    <div v-for="(message, index) in messages" :key="index" :class="['chat-message', message.isRobot ? 'robot' : 'user']">
      <div class="message-content">{{ message.content }}</div>
    </div>
    <div class="chat-input">
      <input type="text" v-model="inputText" @keydown.enter="sendMessage" placeholder="请输入消息" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '你好，我是机器人', isRobot: true },
      ],
      inputText: '',
    }
  },
  methods: {
    sendMessage() {
      const content = this.inputText.trim()
      if (content) {
        this.messages.push({ content, isRobot: false })
        this.inputText = ''
        setTimeout(() => {
          this.messages.push({ content: '对不起，我不知道怎么回答', isRobot: true })
        }, 1000)
      }
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}
.chat-message {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-end;
}
.chat-message.robot {
  justify-content: flex-start;
}
.chat-message.user {
  justify-content: flex-end;
}
.message-content {
  max-width: 80%;
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
  word-wrap: break-word;
}
.chat-input {
  display: flex;
  margin-top: auto;
}
.chat-input input {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  margin-right: 10px;
}
.chat-input button {
  padding: 10px;
  border-radius: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

这段代码实现了一个简单的聊天界面，用户可以在输入框中输入消息，机器人则会随机回复一条消息。`messages` 数组存储了所有的消息记录，`inputText` 存储了当前输入框中的文本。`sendMessage` 方法用于发送消息，它会将用户输入的消息添加到 `messages` 数组中，并且模拟机器人回复一条消息。界面中的样式使用了简单的 CSS 样式。