社交聊天是Vue.js组件，用于在应用程序上创建快速且用户友好的社交聊天或对话形式。

安装和下载：

# Yarn
$ yarn add vue-social-chat libphonenumber-js

# NPM
$ npm i vue-social-chat --save

变更日志：

v0.1.6（12/02/2020）

• 修复Whatsapp链接以在移动设备和网络上工作

社交聊天组件支持 ：

• Whatsapp的
• 电报
• 信使
• 微信
• 推特
• Viber
• 在线聊天
• 电子邮件客户端
• 自定义聊天表格
• 或混合

基本用法：

1.导入并注册组件。

// 导入
import Vue from 'vue'
import VueSocialChat from 'vue-social-chat'

// 注册
Vue.use(VueSocialChat)

// 或在本地
import { SocialChat } from 'vue-social-chat'

export default {
  ...
  components: {
    SocialChat
  }
  ...
}

2.创建Messenger在线聊天的示例。

<template>
  <div class="layout">
    <!-- ommited -->
    <SocialChat
      icon
      class="messenger-chat"
      :attendants="attendants"
    >
      <p slot="header">单击下面我们的代表之一，在Messenger上聊天。</p>
      <MyMessengerIcon slot="button" />
      <small slot="footer">时间：上午8点至下午6点</small>
    </SocialChat>
  </div>
</template>

export default {
  name: 'MessengerPage',
  components: {
    SocialChat
  },
  data: () => ({
    attendants: [
      {
        app: 'messenger',
        label: '技术支持',
        name: 'Alan Ktquez',
        id: 'YOUR_FACEBOOK_ID',
        avatar: {
          src: 'avatar.png',
          alt: '阿兰·克奎兹阿凡达'
        }
      },
      // ...
    ]
  })
}

3.创建混合实时聊天的示例。

<template>
  <div class="layout">
    <!-- ommited -->
    <SocialChat :attendants="attendants">
      <p slot="header">点击下面我们的代表之一聊天。</p>
      <template v-slot:button="{ open }">
        <span v-show="!open">联系我们</span>
        <span v-show="open">关闭</span>
      </template>
      <small slot="footer">时间：上午8点至下午6点</small>
    </SocialChat>
  </div>
</template>

import { SocialChat } from 'vue-social-chat'

export default {
  name: 'WhatsAppPage',

  components: {
    SocialChat
  },

  data: () => ({
    attendants: [
      {
        app: 'whatsapp',
        label: '支持',
        name: 'Alan Ktquez',
        number: 'YOUR_PHONE_NUMBER',
        avatar: {
          src: 'avatar.png',
          alt: '阿凡达支持艾伦·克奎兹'
        }
      },
      {
        app: 'messenger',
        label: '技术支持',
        name: 'Alan Ktquez',
        id: 'YOUR_FACEBOOK_ID',
        avatar: {
          src: 'avatar.',
          alt: '阿兰·克奎兹阿凡达'
        }
      },
      {
        app: 'twitter',
        label: '人力资源',
        name: 'Alan Ktquez',
        id: 'YOUR_TWITTER_ID',
        avatar: {
          src: 'avatar.',
          alt: '阿凡达支持Alan Ktquez'
        }
      }
    ]
  })
}

---

官网：https://github.com/ktquez/vue-social-chat

演示：https://www.vue365.cn/code_demo.php?id=1220

GitHub下载：https://github.com/ktquez/vue-social-chat/archive/master.zip