当前位置：首页 > VUE

vue聊天界面实现

2026-01-23 11:16:50VUE

Vue聊天界面实现

数据绑定与列表渲染

使用Vue的v-for指令渲染消息列表，结合v-model实现双向数据绑定

<template>
  <div class="chat-container">
    <div v-for="(msg, index) in messages" :key="index" class="message">
      <span class="sender">{{ msg.sender }}:</span>
      <span class="content">{{ msg.content }}</span>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    }
  }
}
</script>

消息发送功能

实现消息发送方法，处理用户输入并清空输入框

methods: {
  sendMessage() {
    if (this.newMessage.trim() === '') return

    this.messages.push({
      sender: 'User',
      content: this.newMessage
    })

    this.newMessage = ''
    this.scrollToBottom()
  }
}

自动滚动到底部

在消息列表更新后自动滚动到最新消息位置

scrollToBottom() {
  this.$nextTick(() => {
    const container = this.$el.querySelector('.chat-container')
    container.scrollTop = container.scrollHeight
  })
}

样式设计

添加基础样式美化聊天界面

.chat-container {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
}

.message {
  margin: 8px 0;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.sender {
  font-weight: bold;
  margin-right: 5px;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  box-sizing: border-box;
}

响应式设计优化

添加媒体查询适应不同屏幕尺寸

@media (max-width: 600px) {
  .chat-container {
    height: 300px;
  }
}

消息时间戳

增强消息对象包含时间信息

this.messages.push({
  sender: 'User',
  content: this.newMessage,
  timestamp: new Date().toLocaleTimeString()
})

消息气泡样式

区分发送方和接收方的消息样式

vue聊天界面实现

.message.user {
  background: #e3f2fd;
  align-self: flex-end;
}

.message.other {
  background: #f1f1f1;
  align-self: flex-start;
}

标签: 界面 vue

分享给朋友：

vue设计与实现下载

vue设计与实现电子书下载《Vue.js设计与实现》是一本深入解析Vue.js框架原理的书籍，由霍春阳（HcySunYang）撰写。以下是获取该资源的常见途径：正版购买渠道京东、…

vue实现input

Vue 实现 Input 输入框的方法基本双向绑定使用 v-model 指令实现双向数据绑定，适用于大多数表单场景： <template> <input v-model="…

vue滚动实现

Vue 滚动实现方法使用原生滚动在 Vue 中可以通过 ref 获取 DOM 元素，调用原生滚动方法实现滚动效果。适用于简单场景。 <template> <div ref=…

vue实现爬虫

Vue 实现爬虫的基本思路 Vue.js 本身是一个前端框架，主要用于构建用户界面。要实现爬虫功能，通常需要结合后端技术或浏览器自动化工具。以下是几种常见的方法：方法一：Vue + Node.js…

vue实现slidedown

Vue 实现 SlideDown 动画效果在 Vue 中实现 SlideDown 效果可以通过 CSS 过渡或动画结合 Vue 的过渡系统完成。以下是几种常见方法：使用 Vue Transiti…

vue框架实现CRM

Vue框架实现CRM系统使用Vue框架构建CRM（客户关系管理）系统需要结合前端技术栈和后端API。以下为关键实现方法：技术选型核心框架：Vue 3（Composition API）…

vue聊天界面实现