dialogs.vue
5.6 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
<div>
<beautiful-chat
:participants="participants"
:titleImageUrl="titleImageUrl"
:onMessageWasSent="onMessageWasSent"
:messageList="messageList"
:newMessagesCount="newMessagesCount"
:isOpen="isChatOpen"
:close="closeChat"
:open="openChat"
:showEmoji="true"
:showFile="true"
:showEdition="true"
:showDeletion="true"
:showTypingIndicator="showTypingIndicator"
:showLauncher="true"
:showCloseButton="true"
:colors="colors"
:alwaysScrollToBottom="alwaysScrollToBottom"
:disableUserListToggle="false"
:messageStyling="messageStyling"
@onType="handleOnType"
@edit="editMessage" />
<!-- :icons="icons"-->
</div>
</template>
<script>
export default {
name: "dialogs",
data() {
return {
// socket: null,
// icons: {
// open: {
// img: OpenIcon,
// name: "default",
// },
// close: {
// img: CloseIcon,
// name: "default",
// },
// file: {
// img: FileIcon,
// name: "default",
// },
// closeSvg: {
// img: CloseIconSvg,
// name: "default",
// },
// },
participants: [
{
id: 'user1',
name: 'Matteo',
imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
},
{
id: 'user2',
name: 'Support',
imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
], // 对话的所有参与者的列表。' name '是用户名，' id '用于建立消息的作者，' imageUrl '应该是用户头像。
titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
messageList: [
{ type: 'text', author: `me`, data: { text: `Say yes!` } },
{ type: 'text', author: `user1`, data: { text: `No.` } }
], // // 要显示的消息列表可以动态地分页和调整
newMessagesCount: 0,
isChatOpen: false, // 确定聊天窗口应该打开还是关闭
showTypingIndicator: '', // 当设置为匹配参与者的值时。它显示特定用户的输入指示
colors: {
header: {
bg: '#4e8cff',
text: '#ffffff'
},
launcher: {
bg: '#4e8cff'
},
messageList: {
bg: '#ffffff'
},
sentMessage: {
bg: '#4e8cff',
text: '#ffffff'
},
receivedMessage: {
bg: '#eaeaea',
text: '#222222'
},
userInput: {
bg: '#f4f7f9',
text: '#565867'
}
}, // specifies the color scheme for the component
alwaysScrollToBottom: false, // 当设置为true时，当有新事件发生时(新消息，用户开始输入…)，总是将聊天滚动到底部。
messageStyling: true // 启用*bold* /emph/ _underline_等(更多信息请访问github.com/mattezza/msgdown)
}
},
methods: {
sendMessage (text) {
if (text.length > 0) {
this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
}
},
onMessageWasSent (message) {
// 当用户发送消息时调用
this.messageList = [ ...this.messageList, message ]
},
openChat () {
// 当用户单击fab按钮打开聊天时调用
this.isChatOpen = true
this.newMessagesCount = 0
},
closeChat () {
// // 当用户单击按钮关闭聊天时调用
this.isChatOpen = false
},
handleScrollToTop () {
// 当用户将消息列表滚动到顶部时调用
// 利用分页来加载另一个消息页面
},
handleOnType () {
console.log('Emit typing event')
},
editMessage(message){
const m = this.messageList.find(m=>m.id === message.id);
m.isEdited = true;
m.data.text = message.data.text;
}
}
}
</script>
<style>
.sc-chat-window[data-v-08d4c038]{
width: 500px !important;
padding-right: 50px;
}
.sc-header[data-v-61edfd75]{
margin-top: 50px;
width: 500px;
}
.sc-user-input{
width: 500px;
}
.sc-message-list[data-v-36bb2cf7]{
width: 500px;
}
</style>