elementui聊天

使用 Element UI 实现聊天界面

Element UI 是一个基于 Vue.js 的组件库，适合快速构建企业级应用界面。以下是实现聊天界面的关键步骤和代码示例。

布局结构

使用 el-container 构建整体布局，分为消息列表和输入区域两部分。

<el-container class="chat-container">
  <el-main class="message-list">
    <div v-for="(message, index) in messages" :key="index" class="message-item">
      <div :class="['message-bubble', message.sender === 'user' ? 'user-message' : 'other-message']">
        {{ message.content }}
      </div>
    </div>
  </el-main>
  <el-footer class="input-area">
    <el-input v-model="inputMessage" placeholder="输入消息..." @keyup.enter="sendMessage"></el-input>
    <el-button type="primary" @click="sendMessage">发送</el-button>
  </el-footer>
</el-container>

样式设计

添加 CSS 样式美化聊天界面，区分用户消息和其他消息。

.chat-container {
  height: 500px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.message-list {
  overflow-y: auto;
  padding: 10px;
}

.message-item {
  margin-bottom: 10px;
}

.message-bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 4px;
  word-wrap: break-word;
}

.user-message {
  background-color: #409eff;
  color: white;
  margin-left: auto;
}

.other-message {
  background-color: #f5f7fa;
  color: #606266;
  margin-right: auto;
}

.input-area {
  padding: 10px;
  display: flex;
  align-items: center;
}

.input-area .el-input {
  flex: 1;
  margin-right: 10px;
}

功能实现

在 Vue 实例中定义数据和方法，处理消息发送和显示。

new Vue({
  el: '#app',
  data() {
    return {
      messages: [
        { sender: 'other', content: '你好！有什么可以帮您的吗？' }
      ],
      inputMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.inputMessage.trim() === '') return

      this.messages.push({
        sender: 'user',
        content: this.inputMessage
      })

      // 模拟回复
      setTimeout(() => {
        this.messages.push({
          sender: 'other',
          content: '收到您的消息了！'
        })
      }, 1000)

      this.inputMessage = ''
    }
  }
})

进阶功能

添加时间戳和头像显示，使聊天界面更完整。

<div class="message-item">
  <div class="message-meta">
    <el-avatar :size="30" :src="message.avatar"></el-avatar>
    <span class="message-time">{{ message.time }}</span>
  </div>
  <div :class="['message-bubble', message.sender === 'user' ? 'user-message' : 'other-message']">
    {{ message.content }}
  </div>
</div>

实时通信

结合 WebSocket 实现实时聊天功能。

const socket = new WebSocket('ws://your-websocket-url')

socket.onmessage = (event) => {
  this.messages.push({
    sender: 'other',
    content: event.data,
    time: new Date().toLocaleTimeString()
  })
}

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

    socket.send(this.inputMessage)
    this.messages.push({
      sender: 'user',
      content: this.inputMessage,
      time: new Date().toLocaleTimeString()
    })

    this.inputMessage = ''
  }
}

响应式优化

使用媒体查询确保在不同设备上都能良好显示。

@media (max-width: 768px) {
  .chat-container {
    height: 100vh;
  }

  .message-bubble {
    max-width: 85%;
  }
}

通过以上步骤，可以快速构建一个基于 Element UI 的聊天界面，具备基本的消息发送和接收功能，并可扩展更多高级特性。