插件名称 | vue-social-chat |
---|---|
发布时间 | 2020年7月3日 |
插件作者 | ktquez |
社交聊天是Vue.js组件,用于在应用程序上创建快速且用户友好的社交聊天或对话形式。
# Yarn
$ yarn add vue-social-chat libphonenumber-js
# NPM
$ npm i vue-social-chat --save
v0.1.6(12/02/2020)
基本用法:
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'
}
}
]
})
}