bbs-package 接入指南

起步，安装依赖

//默认安装最新
npm install bbs-package
//指定版本
npm install [email protected]

配置

// main.js 中  仅支持Vue3
//项目使用animate.css 可忽略此步骤
import { createApp } from 'vue'
import 'bbs-package/dist/style.css'
import App from './App.vue'
// 导入
import { chat } from 'bbs-package'
const app = createApp(App)
// 使用即初始化
app.use(chat,{
    connect:{
        groupId:'1655848526302363650',//写存在的即可，使用时直接 调用方法进行切换
        id:'1',//用户ID
        isBannedToPost:true,//首次进入是否禁言
        nickName:'我是昵称',//用户昵称
        loadUrl: 'https://www.hunike.top:9004/#/'//可不传
    },
    logo:{
        showLogo:true,//显示logo 只能在这里配置 没有方法来 管理这个
        drag:true,//是否可拖动
        url:'',//自定义悬浮窗图标
        style:{//自定义悬浮窗大小
            width:'40px',//
            height:'40px',//
        },
        logoPosition:{ //悬浮窗位置
            direction:'right',//靠右 可选值 left
            marginsX:'10',// 水平方向距离边距
            marginsY:'20',//竖直方向距离边距
        }
    }
})
app.mount('#app')

控制

// 选项式 api 使用
this.$chat.showModel()//手动显示聊天窗口
this.$chat.hidModel()//手动关闭聊天窗口

let connect  = {
    groupId:'1655848526302363650',//写存在的即可，使用时直接 调用方法进行切换
    id:'1',//用户ID
    isBannedToPost:true,//首次进入是否禁言
    nickName:'我是昵称',//用户昵称
    loadUrl: 'https://www.hunike.top:9004/#/'//可不传
}
this.$chat.changeGroup(connect)//切换群聊 参数和初始化时结构保持一致

this.$chat.onClickChatCardBtn( callback ) //当聊天窗口中的卡片按钮被点击时触发

// callback -> 回调参数 为分享消息时的 消息体内容


//组合式 api 使用 或 setup 语法糖使用
import { useBBsPackage } from 'bbs-package'
const chatHooks = useBBsPackage()
chatHooks.showModel()//手动显示聊天窗口
chatHooks.hidModel()//手动关闭聊天窗口
let connect  = {
    groupId:'1655848526302363650',//写存在的即可，使用时直接 调用方法进行切换
    id:'1',//用户ID
    isBannedToPost:true,//首次进入是否禁言
    nickName:'我是昵称',//用户昵称
    loadUrl: 'https://www.hunike.top:9004/#/'//可不传
}
chatHooks.changeGroup(connect)//切换群聊 参数和初始化时结构保持一致

chatHooks.onClickChatCardBtn( callback ) //当聊天窗口中的卡片按钮被点击时触发
// callback -> 回调参数 为分享消息时的 消息体内容
//注：内包含其他组件实例