vue手机端实现一个聊天对话框

实现聊天对话框需要以下几个步骤：

1. 创建一个 Vue 组件作为聊天对话框的容器。
2. 在组件中添加一个 input 输入框和一个发送按钮。
3. 定义 messages 数组来存储聊天记录。
4. 监听发送按钮的点击事件，将输入框中的内容添加到 messages 数组中。
5. 使用 v-for 指令遍历 messages 数组，将每条聊天记录渲染到聊天对话框中。

以下是一个简单的实现：

<template>
  <div class="chat-box">
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div class="message-text">{{ message }}</div>
      </div>
    </div>
    <div class="input-box">
      <input type="text" v-model="inputMessage" class="input-message" placeholder="请输入消息" />
      <button @click="sendMessage" class="send-button">发送</button>
    </div>
  </div>
</template>

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

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

.messages {
  flex: 1;
  overflow-y: auto;
}

.message {
  margin: 10px;
}

.message-text {
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
}

.input-box {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
}

.input-message {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
}

.send-button {
  border: none;
  border-radius: 5px;
  padding: 10px;
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
}
</style>

在使用聊天对话框组件时，只需要在父组件中引入该组件并渲染即可：

<template>
  <div>
    <chat-box />
  </div>
</template>

<script>
import ChatBox from '@/components/ChatBox.vue'

export default {
  components: {
    ChatBox
  }
}
</script>