<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>