网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-social-chat是Vue.js悬浮球组件,在应用程序上快速创建社交聊天或对话形式。
1. 导入并注册组件。
// import
import Vue from 'vue'
import VueSocialChat from 'vue-social-chat'
// register
Vue.use(VueSocialChat)
// or locally
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">Click one of our representatives below to chat on Messenger.</p>
<MyMessengerIcon slot="button" />
<small slot="footer">Opening hours: 8am to 6pm</small>
</SocialChat>
</div>
</template>
export default {
name: 'MessengerPage',
components: {
SocialChat
},
data: () => ({
attendants: [
{
app: 'messenger',
label: 'Technical support',
name: 'Alan Ktquez',
id: 'YOUR_FACEBOOK_ID',
avatar: {
src: 'avatar.png',
alt: 'Alan Ktquez avatar'
}
},
// ...
]
})
}
3.创建混合实时聊天的示例。
<template>
<div class="layout">
<!-- ommited -->
<SocialChat :attendants="attendants">
<p slot="header">Click one of our representatives below to chat.</p>
<template v-slot:button="{ open }">
<span v-show="!open">Contact us</span>
<span v-show="open">Close</span>
</template>
<small slot="footer">Opening hours: 8am to 6pm</small>
</SocialChat>
</div>
</template>
import { SocialChat } from 'vue-social-chat'
export default {
name: 'WhatsAppPage',
components: {
SocialChat
},
data: () => ({
attendants: [
{
app: 'whatsapp',
label: 'Support',
name: 'Alan Ktquez',
number: 'YOUR_PHONE_NUMBER',
avatar: {
src: 'avatar.png',
alt: 'Avatar Support Alan Ktquez'
}
},
{
app: 'messenger',
label: 'Technical support',
name: 'Alan Ktquez',
id: 'YOUR_FACEBOOK_ID',
avatar: {
src: 'avatar.',
alt: 'Alan Ktquez avatar'
}
},
{
app: 'twitter',
label: 'Human Resources',
name: 'Alan Ktquez',
id: 'YOUR_TWITTER_ID',
avatar: {
src: 'avatar.',
alt: 'Avatar Support Alan Ktquez'
}
}
]
})
}
转载请注明来源:vue 悬浮球对话框组件(vue-social-chat)
本文永久链接地址:https://www.moyouyouw.cn/code/1141.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论