vue 即时聊天页面布局 代码

由于题目比较抽象，无法确定具体的即时聊天页面布局，以下提供一种基本的布局示例，供参考：

<template>
  <div class="chat-container">
    <div class="sidebar">
      <!-- 左侧侧边栏，通常用于显示联系人列表等信息 -->
      <ul>
        <li v-for="(user, index) in userList" :key="index">{{ user }}</li>
      </ul>
    </div>
    <div class="main">
      <!-- 右侧主要内容 -->
      <div class="chat-box">
        <!-- 聊天窗口 -->
        <div class="message-list">
          <!-- 消息列表 -->
          <div class="message" v-for="(message, index) in messageList" :key="index">
            <div class="avatar">
              <!-- 消息发送者头像 -->
              <img :src="message.avatar" alt="">
            </div>
            <div class="content">
              <!-- 消息内容 -->
              <div class="username">{{ message.username }}</div>
              <div class="text">{{ message.text }}</div>
              <div class="time">{{ message.time }}</div>
            </div>
          </div>
        </div>
        <div class="message-input">
          <!-- 消息输入框 -->
          <input type="text" v-model="inputText">
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: ["张三", "李四", "王五"],
      messageList: [
        {
          avatar: "/img/avatar1.png",
          username: "张三",
          text: "你好",
          time: "2021-05-01 12:00:00"
        },
        {
          avatar: "/img/avatar2.png",
          username: "李四",
          text: "你好啊",
          time: "2021-05-01 12:01:00"
        },
        {
          avatar: "/img/avatar3.png",
          username: "王五",
          text: "我是王五",
          time: "2021-05-01 12:02:00"
        }
      ],
      inputText: ""
    }
  },
  methods: {
    sendMessage() {
      if (this.inputText.trim() === "") {
        return
      }
      const message = {
        avatar: "/img/avatar4.png",
        username: "我",
        text: this.inputText,
        time: new Date().toLocaleString()
      }
      this.messageList.push(message)
      this.inputText = ""
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  height: 100vh;
}
.sidebar {
  flex: 0 0 200px;
  background-color: #f3f3f3;
  border-right: 1px solid #ddd;
  padding: 10px;
}
.main {
  flex: 1;
  padding: 10px;
}
.chat-box {
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 80vh;
  overflow: auto;
  padding: 10px;
}
.message {
  display: flex;
  margin-bottom: 10px;
}
.avatar {
  flex: 0 0 50px;
}
.avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.content {
  flex: 1;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.username {
  font-weight: bold;
}
.text {
  margin-top: 5px;
}
.time {
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}
.message-input {
  margin-top: 10px;
  display: flex;
}
.message-input input {
  flex: 1;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 5px;
}
.message-input button {
  margin-left: 10px;
  height: 30px;
  border-radius: 5px;
  border: none;
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
}
</style>

以上代码实现了一个简单的即时聊天页面布局，包括左侧侧边栏、右侧聊天窗口和消息输入框。具体效果可以根据实际情况进行调整。