vue2实现消息对话框页面

以下是一个简单的基于 Vue 2.x 实现消息对话框页面的示例代码：

<!-- MessageDialog.vue -->
<template>
  <div class="message-dialog">
    <div class="message-list">
      <div class="message" v-for="(message, index) in messages" :key="index">
        <div class="message-content" :class="{ 'left': message.isLeft, 'right': !message.isLeft }">
          {{ message.content }}
        </div>
      </div>
      <div ref="messageEnd"></div> <!-- 自动滚动到底部的锚点 -->
    </div>
    <div class="message-input">
      <input type="text" v-model="currentMessage" @keyup.enter="sendMessage" placeholder="请输入消息内容" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 存储消息列表
      currentMessage: '' // 当前输入的消息
    };
  },
  methods: {
    sendMessage() {
      if (this.currentMessage.trim() === '') {
        return;
      }
      this.messages.push({ content: this.currentMessage, isLeft: true });
      this.currentMessage = '';
      this.$nextTick(() => {
        this.$refs.messageEnd.scrollIntoView({ behavior: 'smooth' }); // 滚动到底部
      });
    }
  }
};
</script>

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

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.message {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.message-content {
  padding: 8px 10px;
  border-radius: 5px;
  color: #fff;
  max-width: 200px;
}

.message-content.left {
  background-color: #2196f3;
  align-self: flex-start;
}

.message-content.right {
  background-color: #4caf50;
  align-self: flex-end;
}

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

.message-input input[type="text"] {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-right: 10px;
}

.message-input button {
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #2196f3;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.message-input button:hover {
  background-color: #1976d2;
}
</style>

该页面包含一个消息列表和一个消息输入框。每当用户在输入框中输入一条消息并按下回车键或点击发送按钮时，该消息将被添加到消息列表中。

为了使消息列表能够自动滚动到底部，我们添加了一个锚点元素，并在每次添加新消息时使用 `$nextTick()` 方法将页面滚动到该锚点元素。