帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

vue 悬浮球对话框组件(vue-social-chat)

帝国模板之家 2020-12-31 网页特效 评论

介绍

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'
        }
      }
    ]
  })
}
人生不要怕失败,因为失败连着成功。只有那些有勇气的人,才敢不断挑战人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言