html css vue构建简单的聊天窗口

效果图

vue

 <script type="module">
    let ve = new Vue({
      el: '#app',
      data() {
        return {
          messages: [
            { side: 'left', avatar: 'images/aa.jpg', text: 'Hello, how are you?Hello, how are you?Hello, how are you?Hello, how are you?Hello, how are you?Hello, how are you?Hello, how are you?Hello, how are you?' },
            { side: 'right', avatar: 'images/aa.jpg', text: 'I\'m fine, thanks for asking.' },
            { side: 'left', avatar: 'images/aa.jpg', text: 'Great! What are you up to today?' },
            { side: 'right', avatar: 'images/aa.jpg', text: 'Just hanging out, you know.' }
          ]
        };
      },
      methods: { },
      mounted() { },
      created() { },
    });  
  </script>

html

<div id="app">
    <img src="images/top.jpg" width="100%" />
    <div class="chat-container">
      <div class="message" v-for="(msg, index) in messages" :key="index"
        :class="{'left': msg.side === 'left', 'right': msg.side === 'right'}">
        <img :src="msg.avatar" alt="User Avatar" class="avatar">
        <div class="content">
          <p>{{ msg.text }}</p>
        </div>
      </div>
    </div>
  </div>

css

.chat-container {
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
    width: 100%;
    margin: auto;
    background-color: rgb(246, 248, 250);
}

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

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.left .avatar {
    margin-right: 0;
    margin-left: 10px;
    order: 2;
    /* 将头像放在文字的右侧 */
}

.content {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    max-width: 70%;
    position: relative;
}

.left .content {
    background-color: #e0eaff;
    /* 左侧消息的背景色 */
    margin-left: auto;
    /* 将内容推到右侧 */
}

.right .content {
    background-color: #eff0e0;
    /* 右侧消息的背景色 */
}

.left .content::before {
    /* 指向左侧的三角形箭头样式 */
    content: '';
    position: absolute;
    right: -16px;
    /* 向左偏移 */
    top: 5px;
    /* 垂直位置调整 */
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #e0eaff;
    /* 匹配.is-me的背景色 */
}

.right .content::before {
    /* 指向右侧的三角形箭头样式 */
    content: '';
    position: absolute;
    left: -16px;
    /* 向右偏移 */
    top: 5px;
    /* 垂直位置调整，可能与.is-me相同或不同 */
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: #eff0e0;
    /* 匹配.is-them的背景色 */
}