用HTML+CSS+vue写一个聊天气泡框

好的，以下是一个简单的聊天气泡框的实现方法：

HTML部分：

<div id="chat-container">
  <div class="message received">
    <div class="message-content">
      <p>Hello!</p>
    </div>
  </div>
  <div class="message sent">
    <div class="message-content">
      <p>Hi there!</p>
    </div>
  </div>
</div>

CSS部分：

#chat-container {
  display: flex;
  flex-direction: column;
}

.message {
  max-width: 70%;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.received {
  background-color: #eee;
  align-self: flex-start;
}

.sent {
  background-color: #0084ff;
  color: #fff;
  align-self: flex-end;
}

.message-content {
  font-size: 16px;
  line-height: 1.5;
  padding: 5px;
}

Vue部分：

<template>
  <div id="chat-container">
    <div v-for="(message, index) in messages" :key="index" :class="message.type">
      <div class="message-content">
        <p>{{ message.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: 'Hello!', type: 'received' },
        { content: 'Hi there!', type: 'sent' }
      ]
    }
  }
}
</script>

<style>
#chat-container {
  display: flex;
  flex-direction: column;
}

.message {
  max-width: 70%;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.received {
  background-color: #eee;
  align-self: flex-start;
}

.sent {
  background-color: #0084ff;
  color: #fff;
  align-self: flex-end;
}

.message-content {
  font-size: 16px;
  line-height: 1.5;
  padding: 5px;
}
</style>

这是一个简单的聊天气泡框的实现方法，你可以根据实际需求进行修改和优化。