模拟微信聊天界面有头像等的vue代码

好的，以下是一个带头像的 Vue 组件，用于模拟微信聊天界面。需要注意的是，这个组件只是一个简单的示例，样式和功能都可以根据实际需要进行调整和完善。

<template>
  <div class="chat">
    <div v-for="(message, index) in messages" :key="index" class="message" :class="{ 'from-me': message.from === 'me', 'from-other': message.from === 'other' }">
      <div class="avatar" v-if="message.showAvatar">{{ message.from.charAt(0) }}</div>
      <div class="bubble">{{ message.content }}</div>
    </div>
    <div class="input-area">
      <textarea v-model="inputText" @keyup.enter="sendMessage" placeholder="Type a message"></textarea>
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { from: 'me', content: 'Hello!', showAvatar: true },
        { from: 'other', content: 'Hi there!', showAvatar: true },
      ],
      inputText: '',
    };
  },
  methods: {
    sendMessage() {
      if (!this.inputText) {
        return;
      }
      this.messages.push({ from: 'me', content: this.inputText, showAvatar: false });
      this.inputText = '';
    },
  },
};
</script>

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

.message {
  display: flex;
  align-items: flex-end;
  margin: 10px;
}

.from-me .avatar {
  display: none;
}

.from-other .avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bubble {
  max-width: 70%;
  border-radius: 20px;
  padding: 10px;
  background-color: #eee;
}

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

textarea {
  flex: 1;
  height: 30px;
  resize: none;
  margin-right: 10px;
}

button {
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

在这个组件中，每个消息都有一个 `showAvatar` 属性，用于控制是否显示头像。如果要显示头像，我们可以使用一个字符来代替头像图片，例如使用发送者名字的首字母。在样式中，我们使用 `from-me` 和 `from-other` 类来区分自己发送的消息和别人发送的消息，从而来控制头像的显示和隐藏。