vue聊天组件移动端

唯美聊天 (vue-beautiful-chat)

A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

一个简单而美丽的Vue聊天组件后端不可知，可完全自定义和扩展。

vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.

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

特征 (Features)

• Customizeable

  可订制

• Backend agnostic

  后端不可知

• Free

  自由

安装 (Installation)

$ yarn add vue-beautiful-chat

例 (Example)

import Chat from 'vue-beautiful-chat'
Vue.use(Chat)

<template>
  <div>
    <beautiful-chat
      :agentProfile="agentProfile"
      :onMessageWasSent="onMessageWasSent"
      :messageList="messageList"
      :newMessagesCount="newMessagesCount"
      :isOpen="isChatOpen"
      :close="closeChat"
      :open="openChat"
      :showEmoji="true"
      :showFile="true" />
      <a href="#" @click.prevent="openChat()">Open the chat window</a>
  </div>
</template>

export default {
  data() {
    return {
      agentProfile: {
        teamName: 'Vue Beautiful Chat',
        imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
      },
      messageList: [],
      newMessagesCount: 0,
      isChatOpen: false
    }
  },
  methods: {
    sendMessage (msg) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.messageList.push(msg)
      }
    },
    onMessageWasSent (msg) {
      this.messageList.push(msg)
    },
    openChat () {
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat () {
      this.isChatOpen = false
    }
  }
}

For more detailed examples see the demo folder.

有关更多详细示例，请参见demo文件夹。

组件 (Components)

发射器 (Launcher)

Launcher is the only component needed to use vue-beautiful-chat. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.

Launcher是使用vue-beautiful-chat所需的唯一组件。 它将动态响应消息中的更改。 如示例所示，必须通过更改道具来添加所有新消息。

Launcher props:

发射器道具：

讯息对象 (Message Objects)

Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported. Each message object has an author field which can have the value 'me' or 'them'.

消息对象的呈现方式取决于它们的类型。 当前，仅支持文本，表情符号和文件类型。 每个消息对象都有一个author字段，该字段可以具有值“ me”或“ them”。

{
  author: 'them',
  type: 'text',
  data: {
    text: 'some text'
  }
}

{
  author: 'me',
  type: 'emoji',
  data: {
    code: 'someCode'
  }
}

{
  author: 'me',
  type: 'file',
  data: {
    name: 'file.mp3',
    url: 'https:123.rf/file.mp3'
  }
}

常问问题 (FAQ)