用vue和ElementUI写一个聊天对话的代码

在Vue.js和Element UI框架中创建一个简单的聊天对话界面，我们可以使用`v-for`循环遍历聊天记录，同时结合`<el-input>`、`<button>`等元素来实现发送消息的功能。下面是一个基本的代码结构示例：

<template>
  <div id="chat-app">
    <div class="chat-messages">
      <div v-for="(msg, index) in messages" :key="index">
        <el-row :gutter="16">
          <el-col :xs="12" :sm="8" :md="6">
            <p>{{ msg.user }}: {{ msg.content }}</p>
          </el-col>
          <el-col :xs="12" :sm="4" :md="6" align="right">
            <span @click="deleteMessage(index)" slot="append">删除</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-form ref="form" :model="newMessage" label-width="50px">
      <el-input v-model="newMessage.inputText" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 聊天记录数组
      newMessage: { inputText: '' }, // 新消息对象
    };
  },
  methods: {
    sendMessage() {
      const { inputText } = this.newMessage;
      if (inputText.trim()) {
        // 添加新消息到数组并清空输入框
        this.messages.push({ user: 'You', content: inputText });
        this.newMessage.inputText = '';
      }
    },
    deleteMessage(index) {
      this.messages.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.chat-messages {
  padding-bottom: 20px;
}
</style>

以上代码首先定义了一个聊天记录列表，然后设置了一个表单用于接收用户输入的新消息。`sendMessage`方法会在用户点击发送按钮时将新消息添加到数组，`deleteMessage`则用于删除指定索引的旧消息。