漂亮的Vue聊天组件 - vue-beautiful-chat

漂亮的Vue聊天组件 - vue-beautiful-chat
插件名称 vue-beautiful-chat
发布时间 2020年6月18日
插件作者 mattmezza

vue-beautiful-chat提供了一个类似于内部通信的聊天窗口,可以轻松将其免费包含在任何项目中。它不提供消息传递功能,仅提供视图组件。

变更日志:

2020年12月23日

  • v2.5.0:还原消息删除确认

2020年11月19日

  • v2.5.0:从商店使用showDeletion和showEdition

2020年10月18日

  • v2.5.0:关于删除的最终确认。

2020年8月4日

  • v2.5.0

2020年6月16日

  • v2.4.1

安装和下载:

# Yarn
$ yarn add vue-beautiful-chat

# NPM
$ npm install vue-beautiful-chat --save

例子:

import Chat from 'vue-beautiful-chat'
Vue.use(Chat)
<template>
  <div>
    <beautiful-chat
      :participants="participants"
      :titleImageUrl="titleImageUrl"
      :onMessageWasSent="onMessageWasSent"
      :messageList="messageList"
      :newMessagesCount="newMessagesCount"
      :isOpen="isChatOpen"
      :close="closeChat"
      :icons="icons"
      :open="openChat"
      :showEmoji="true"
      :showFile="true"
      :showEdition="true"
      :showDeletion="true"
      :showTypingIndicator="showTypingIndicator"
      :showLauncher="true"
      :showCloseButton="true"
      :colors="colors"
      :alwaysScrollToBottom="alwaysScrollToBottom"
      :messageStyling="messageStyling"
      @onType="handleOnType"
      @edit="editMessage" />
  </div>
</template>
import CloseIcon from 'vue-beautiful-chat/src/assets/close-icon.png'
import OpenIcon from 'vue-beautiful-chat/src/assets/logo-no-bg.svg'
import FileIcon from 'vue-beautiful-chat/src/assets/file.svg'
import CloseIconSvg from 'vue-beautiful-chat/src/assets/close.svg'

export default {
  name: 'app',
  data() {
    return {
      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'
        }
      }, // 指定组件的配色方案
      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;
    }
}