ChatList.vue
2.05 KB
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
<ul id="chat-list" class="m-chat-list p-chat-list">
<li class="u-msg item-time" v-if="canLoadMore">
---- 上拉加载更多 ----
</li>
<li class="u-msg item-time" v-else>
---- 已无更多记录 ----
</li>
<chat-item
v-for="msg in msglist"
:type="type"
:rawMsg="msg"
:isRobot="isRobot"
:userInfos="userInfos"
:myInfo="myInfo"
:key="msg.idClient"
:isHistory='isHistory'
@msg-loaded="msgLoaded"
></chat-item>
</ul>
</template>
<script type="text/javascript">
import util from '../../utils'
import config from '../../configs'
import emojiObj from '../../configs/emoji'
import ChatItem from './ChatItem'
export default {
components: {
ChatItem
},
props: {
type: String, // 类型，chatroom, session
canLoadMore: [String, Boolean],
isRobot: {
type: Boolean,
default () {
return false
}
},
msglist: {
type: Array,
default () {
return []
}
},
userInfos: {
type: Object,
default () {
return {}
}
},
myInfo: {
type: Object,
default () {
return {}
}
},
isHistory: {
type: Boolean,
default() {
return false
}
}
// robotInfos: {
// type: Object,
// default () {
// return {}
// }
// }
},
data () {
return {
isFullImgShow: false,
msgLoadedTimer: null
}
},
methods: {
showFullImg (src) {
this.$store.dispatch('showFullscreenImg', {
src
})
},
msgLoaded () {
clearTimeout(this.msgLoadedTimer)
this.msgLoadedTimer = setTimeout(() => {
this.$emit('msgs-loaded')
}, 20)
}
}
}
</script>
<style type="text/css">
.p-chat-list {
.u-icon {
width: 1.4rem;
height: 1.6rem;
margin-right: 0.2rem;
vertical-align: bottom;
}
}
</style>