chat-uikit-vue 是一款 Vue 版本 Chat UI 组件库,同时兼容 Vue2 & Vue3。它提供了一些通用的 UI 组件,包含会话、聊天、音视频通话、关系链、资料、群组等功能。基于这些精心设计的 UI 组件,您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。
开发者在使用 chat-uikit-vue 时只需关注自身业务需求或个性化扩展即可,chat 相关的逻辑操作和数据处理,chat-uikit-vue 已为您封装好。
chat-uikit-vue2 Web 端 和 H5 端界面效果如下图所示, 可点击 CHAT WEB DEMO 体验地址 进行在线体验。
为方便您的使用,本组件配套多篇使用指引:
-
如果您想体验基础聊天效果,请访问 CHAT WEB DEMO 体验地址 进行在线体验。
-
如果您想把我们的 UIKit 功能集成到您的项目中,请阅读 快速集成 Chat UIKit 。
-
如果您想要直接使用 Demo 工程效果,请阅读 Vue3 Demo 快速跑通 或者 Vue2 Demo 快速跑通 。
-
如果您想要修改 UI 界面,请阅读 Chat UIKit 设置界面风格
// 引入 TUILogin 模块
import { TUILogin } from '@tencentcloud/tui-core';
初始化登录参数 options 配置说明:
参数 | 类型 | 含义 |
---|---|---|
SDKAppID | number | 云通信应用的 SDKAppID,必填 |
userID | string | 用户 ID,必填 |
userSig | string | 用户登录密钥,必填 |
TIMPush | any | 推送插件实例,uniapp 打包 app 时集成推送插件可用 |
pushConfig | object | 推送插件配置信息,uniapp 打包 app 时集成推送插件可用 |
useUploadPlugin | boolean | 是否使用上传插件, 默认 false |
proxyServer | string | WebSocket 服务器代理地址 |
fileUploadProxy | string | 图片、视频、文件上传代理地址 |
fileDownloadProxy | string | 图片、视频、文件下载代理地址 |
framework | string | undefined | 使用的 UI 框架,可选值: vue2、vue3、undefined,必填 |
// 初始化登录
TUILogin.login(options);
// 登出
TUILogin.logout();
// 设置 Chat SDK 日志输出级别
TUILogin.setLogLevel(0); // 0:普通日志级别 1:release 级别日志 2:告警级别 3:错误级别 4:无日志级别
// 获取 Chat SDK 实例
const { chat } = TUILogin.getContext();
- chat-uikit-vue Github 仓库
- chat-uikit-vue2 Demo 源码下载
- chat-uikit-vue3 Demo 源码下载
- @tencentcloud/chat-uikit-vue npm 仓库(兼容 vue2 & vue3)
- CHAT WEB DEMO 体验地址
点此进入 IM 社群,享有专业工程师的支持,解决您的难题