125 lines
2.3 KiB
Vue
125 lines
2.3 KiB
Vue
<template>
|
|
<section class="chatContent">
|
|
<div class="chat-wrapper" v-for="item in list" :key="item.id">
|
|
<div class="chat-text" :class="{right:item.uid == 'me'}">
|
|
<img class="avatar" :src="item.avatar" alt=""/>
|
|
<div class="content" v-text="item.msg"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "chatContent",
|
|
props: {
|
|
list: {default: () => []}
|
|
},
|
|
watch: {
|
|
list: {
|
|
deep: true, handler() {
|
|
this.scrollBottom()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
scrollBottom() {
|
|
this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
|
|
},
|
|
optimizeMessage(msg = "") {
|
|
return msg.trim()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chatContent {
|
|
overflow-y: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 3px;
|
|
/* 设置滚动条宽度 */
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: rgb(66, 70, 86);
|
|
/* 设置滚动条滑块的背景色 */
|
|
border-radius: 50%;
|
|
/* 设置滑块的圆角 */
|
|
}
|
|
|
|
.chat-text {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
|
|
.content {
|
|
position: relative;
|
|
max-width: 220px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background: #F3F5F7;
|
|
word-break: break-all;
|
|
|
|
&:before {
|
|
content: " ";
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
border-right: 6px solid #F3F5F7;
|
|
position: absolute;
|
|
left: -6px;
|
|
top: 6px;
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
flex-direction: row-reverse;
|
|
|
|
.content {
|
|
background: #CCE2FF;
|
|
|
|
&:before {
|
|
left: unset;
|
|
right: -6px;
|
|
border-left: 6px solid #CCE2FF;
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 36px;
|
|
height: auto;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.chat-friend {
|
|
width: 100%;
|
|
float: left;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.chat-me {
|
|
width: 100%;
|
|
float: right;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
</style>
|