vue2写了一个简单的静态聊天页面_pc端聊天页面编写vue

最近用vue2.0写了一个简单的静态聊天页面，记录一下

 <!--          消息整体-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             v-for="(message, index) in messages"
             :key="index">

          <!--            消息头像-->
          <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img src="~@/assets/examineeFace.png" class="examineeFace_logo_style">
          </div>
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!--            消息上面-->
            <div :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'">
              考生
            </div>
            <!--          消息内容-->
            <div :class="message.sender==='me'?'message-me':'message-other'">
              {{ message.content }}
            </div>
          </div>
        </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

以下是假数据

``
export default {
 data() {
  return {
   messages: [
        {sender: 'me', content: '你好！'},
        {sender: 'other', content: '你好啊！'},
        {sender: 'other', content: '请问有什么我可以帮助你的吗？'},
        {sender: 'me', content: '我正在寻找一家好的餐厅。'},
        {sender: 'other', content: '你在哪个城市？'},
        {sender: 'me', content: '我在北京。'},
        {sender: 'other', content: '好的，我可以为您推荐一些北京的餐厅。您需要什么类型的餐厅？'},
        {sender: 'me', content: '我想要吃火锅。'},
        {sender: 'other', content: '好的，以下是我为您推荐的北京火锅餐厅列表：[餐厅1，餐厅2，餐厅3]。您需要我帮您预约吗？'},
        {sender: 'me', content: '不需要，我会自己预约。谢谢您的帮助！'},
        {sender: 'other', content: '不客气，祝您用餐愉快！'},
        {sender: 'me', content: '再见！'},
        {sender: 'other', content: '再见！'}
      ],
    }
  },
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

css样式

.chat-message-other {
  /*background-color: red;*/
  display: flex;
  padding-left: 1rem;
  padding-top: 1rem;
}

.chat-message-me {
  /*background-color: red;*/
  display: flex;
  padding-right: 1rem;
  padding-top: 1rem;
  flex-direction: row-reverse; /* 将子div的顺序反转 */

}

.message-me-asWhole-headPortrait {
  padding: 3px;
}

.message-other-asWhole-headPortrait {
  padding: 3px;
}

.message-me-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-other-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-me-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
  text-align: right;
}

.message-other-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
}

.message-me {
  background-color: rgba(242, 243, 245, 1);
  max-width: 280px;
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}

.message-other {
  background-color: rgba(242, 243, 245, 1);
  max-width: 280px;
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}


.examineeFace_logo_style {
  width: 30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

效果图：