# Vue-IMUI **Repository Path**: xueyanjun/vue-imui ## Basic Information - **Project Name**: Vue-IMUI - **Description**: 基于vue的im组件 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-06-28 - **Last Updated**: 2025-06-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VUE IMUI 基于 VUE 的 IM 聊天组件 ## 特性 - 拥有丰富的自定义功能，任意搭配出不同风格的聊天界面 - 不依赖任何第三方 UI 组件库 - 可任意扩展聊天消息类型 ## 效果 ![输入图片说明](public/out.gif) ## api ### 联系人 Contact | 参数 | 说明 | 类型 | 默认值 | 示例 | |--------------|--------------------------------------------|--------------------|--------|-------------------------------------------| | id | 唯一ID | String/Number | - | | | displayName | 名称 | String | - | | | avatar | 头像 | String | - | | | index | 通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[1]群组” | String | - | | | unread | 未读消息数 | Number | 0 | | | lastSendTime | 最近一条消息的时间戳，13位毫秒 | timestamp | 0 | | | lastContent | 最近一条消息的内容 | String | Vnode | | ### 消息体 Message | 参数 | 说明 | 类型 | 默认值 | 示例 | |--------------|----------------------------------------------------------------------|--------------------|--------|-------------------------------------------| | id | 唯一ID | String/Number | - | | | status | 消息发送的状态：going | failed | succeed | String | - | | | type | 消息类型：file | image | text | event | String | Vnode | - | | | sendTime | 消息发送时间，13位毫秒 | timestamp | - | | | content | 消息内容，如果type=file，此属性表示文件的URL地址 | String | - | | | fileSize | 文件大小 | Number | 0 | | | fileName | 文件名称 | String | - | | | toContactId | 接收消息的联系人ID | String | Number | - | | | fromUser | 消息发送人的信息 | Object | - | {id: "1",displayName: "测试",avatar: "url"}; | ### 右键菜单 ContextMenuItem | 名称 | 说明 | 类型 | 示例 | |--------|----------------------------------------------------------------------|--------------------------|------| | text | 显示文字 | String | - | | color | 颜色 | String | - | | icon | 图标 class | String | - | | click | 点击事件，调用hide方法隐藏右键菜单。 | Function(e,instance,hide) | - | | visible| 是否显示的判断函数 | Function(instance) | - | | render | 负责样式的渲染函数，使用render的时候text属性会失去作用，调用hide方法隐藏右键菜单。 | Function(e,instance,hide) | - | ### 抽屉配置 DrawerOption | 名称 | 说明 | 类型 | 示例 | |----------|------------------------------|--------------------|------| | width | 宽度，可以设置百分比 | String | Number | - | | height | 高度，可以设置百分比 | String | Number | - | | offsetX | X偏移值，可以设置百分比 | String | Number | - | | offsetY | Y偏移值，可以设置百分比 | String | Number | - | | position | 位置 | right | rightInside | center | - | ### 组件属性 | 参数 | 说明 | 类型 | 默认值 | 示例 | |--------------------|--------------------------------------------|--------------------------|----------|----------------------------------------------------------------------| | user | 用户信息 | Object | - | {id: "1",displayName: "测试",avatar: "url"}; | | width | 宽度 | String | 850px | | | height | 高度 | String | 580px | | | theme | 主题 | default | blue | default | | loadingText | 消息加载文字 | String | Function | - | | loadEndText | 消息加载结束文字 | String | Function | 暂无更多消息 | | avatarCircle | 使用圆形头像 | Boolean | false | | | sendText | 发送消息按钮的文字 | String | 发送消息 | | | wrapKey | 输入框换行检查函数 | Function(event)=>Boolean | (e)=>e.keyCode == 13 && e.ctrlKey == false && e.shiftKey == false; | | | sendKey | 快捷发送键检查函数 | Function(event)=>Boolean | (e)=>e.keyCode == 13 && e.ctrlKey | | | simple | 精简模式 | Boolean | false | 精简模式下左侧的导航和联系人列表会隐藏，初始化时需要手动调用 changeContact 切换到聊天视图。 | | messageTimeFormat | 消息列表时间格式化函数 | Function(time)=>String | - | | | contactTimeFormat | 联系人时间格式化规则 | Function(time)=>String | - | | | hideDrawer | 是否隐藏抽屉 | Boolean | true | | | hideMenuAvatar | 是否隐藏导航头像 | Boolean | false | | | hideMenu | 是否隐藏左侧导航 | Boolean | false | | | hideMessageName | 是否隐藏聊天窗口内的联系人名字 | Boolean | false | | | hideMessageTime | 是否隐藏聊天窗口内的消息发送时间 | Boolean | false | | | contextmenu | 聊天消息右键菜单配置 | [ContextmenuItem] | - | | | contactContextmenu | 联系人右键菜单配置 | [ContextmenuItem] | - | | ### 组件方法 | 参数 | 说明 | 类型 | 默认值 | 示例 | |--------------------|----------------------------------------------------------------------|--------------------------|----------|----------------------------------------------------------------------| | initMenus | 初始化导航 | Function({Object}) | - | [{ name: "messages", title: "消息" }, { name: "custom2", title: "自定义按钮2", unread: 0, click: () => { alert("拦截导航点击事件"); }, render: menu => { return '...'; }, isBottom: true }] | | initContacts | 初始化联系人 | Function([Contact]) | - | | | initEditorTools | 初始化工具栏 | Function({Object}) | - | [{name:'emoji'}, {name:'uploadFile'}, {name:'uploadImage'}] | | initEmoji | 初始化表情数据 | Function({Object}) | - | 有分类：[{ label: '默认表情', children: [{ name: '1f62c', title: '微笑', src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' }]}] 无分类：[{ name: '1f62c', title: '微笑', src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' }] | | appendMessage | 新增一条消息，如果当前焦点在该联系人的聊天窗口，设置scrollToBottom=true添加之后自动定位到消息窗口底部 | Function(Message,scrollToBottom=false) | - | | | removeMessage | 删除聊天消息 | Function(Message.id) | - | | | updateMessage | 修改消息，根据 Message.id 查找聊天消息并覆盖传入的值（toContactId会被忽略） | Function(Message) | - | | | appendContact | 添加联系人 | Function(Contact) | - | | | removeContact | 删除联系人 | Function(Contact.id) | - | | | updateContact | 修改联系人，根据 Contact.id 查找联系人并覆盖传入的值 | Function(Contact) | - | | | clearMessages | 清空某个联系人的本地消息记录，重新切换到该联系人时会再次触发pull-messages事件，Contact.id为空则清空所有 | Function(Contact.id)=>Boolean | - | | | getMessages | 返回所有本地消息，传入 Contact.id 则只返回与该联系人的消息 | Function(Contact.id)=>[Message] | - | | | getCurrentContact | 返回当前聊天窗口的联系人信息 | Function()=>Contact | - | | | getCurrentMessages | 返回当前聊天窗口的所有消息 | Function()=>[Message] | - | | | getContacts | 返回所有本地联系人 | Function()=>[Contact] | - | | | openDrawer | 打开联系人右侧抽屉，vnode为抽屉内容 | Function(vnode) | - | | | changeDrawer | 切换右侧抽屉显示/隐藏，vnode为抽屉内容 | Function(DrawerOption) | - | | | closeDrawer | 关闭抽屉 | Function() | - | | | changeMenu | 切换左侧导航 | Function(Menu.name) | - | | | changeContact | 切换聊天窗口 | Function(Contact.id,instance) | - | | | messageViewToBottom| 将当前聊天窗口滚动到底部 | Function() | - | | | setLastContentRender| 设置左侧联系人最新消息的渲染函数 | Function(Message.type,(Message)=>vnode) | - | setLastContentRender('image', message => { return [最新图片] }) | | lastContentRender | 用来生成 Message.lastContent 需要的vnode结构 | Function(Message) | - | | | setEditorValue | 设置编辑框内容 | Function(string) | - | | | getEditorValue | 获取编辑框内容 | Function()=>string | - | | ### 组件插槽 | 插槽名 | 说明 | 参数 | |------------------|--------------------------------------------|----------| | cover | 初始化时的封面 | - | | editor-footer | 消息输入框底部 | - | | message-title | 消息列表的标题 | Contact | | message-after | 每条消息的尾部 | Message | | sidebar-message | 左侧最新消息列表插槽 | Contact | | sidebar-contact | 左侧联系人列表插槽 | Contact | | sidebar-message-top | 左侧最新消息列表的顶部，会随列表滚动 | instance | | sidebar-contact-top | 左侧联系人列表的顶部，会随列表滚动 | instance | | sidebar-message-fixedtop | 固定在左侧最新消息列表的顶部 | instance | | sidebar-contact-fixedtop | 固定在左侧联系人列表的顶部 | instance | | contact-info | 左侧联系人详细页 | Contact | | message-side | 消息列表右侧 | Contact | ### 组件事件 | 事件名 | 说明 | 参数 | |-----------------|----------------------------------------------------------------------|------------------------------------------------| | change-menu | 当左侧导航选项卡切换的时候会触发该事件 | Menu.name | | menu-avatar-click | 当左侧导航内的头像被点击时回触发该事件 | Contact | | change-contact | 当左侧联系人点击时会触发该事件 | Contact | | pull-messages | 当切换聊天对象或者聊天窗口滚动到顶部时会触发该事件，调用next方法结束loading状态，如果设置了isEnd=true，下次聊天窗口滚动到顶部将不会再触发该事件 | Contact,next([Message],isEnd),instance | | message-click | 点击聊天窗口中的消息时会触发该事件 | event,key,Message,instance | | send | 当发送新消息时会触发该事件 | Message,Function(Message): 调用该函数完成消息发送，可以传入Message来改变消息内容，file:上传时的文件 |