自定义封面 Lemon IMUI
{{ contact.displayName }}
最新消息：
| 参数 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| id | 唯一ID | String/Number | - | |
| displayName | 名称 | String | - | |
| avatar | 头像 | String | - | |
| index | 通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[1]群组” | String | - | |
| unread | 未读消息数 | Number | 0 | |
| lastSendTime | 最近一条消息的时间戳，13位毫秒 | timestamp | 0 | |
| lastSendTime | 最近一条消息的内容 | String | Vnode |
| 参数 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| id | 唯一ID | String/Number | - | |
| status | 消息发送的状态：going | failed | succeed | String | - | |
| type | 消息类型：file | image | text | String | - | |
| sendTime | 消息发送时间，13位毫秒 | timestamp | - | |
| content | 消息内容，如果type=file，此属性表示文件的URL地址 | String | - | |
| fileSize | 文件大小 | Number | 0 | |
| fileName | 文件名称 | String | - | |
| toContactId | 接收消息的联系人ID | String | Number | - | |
| fromUser | 消息发送人的信息 | Object | - | {id: "1",displayName: "测试",avatar: "url"}; |
| 参数 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| user | 用户信息 | Object | - | {id: "1",displayName: "测试",avatar: "url"}; |
| width | 宽度 | String | 850px | |
| height | 高度 | String | 580px | |
| theme | 主题 | default | blue | default | 主题颜色 |
| 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 |
| 参数 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| initMenus | 初始化导航 | Function([Object]) | [ { name: "messages" }, { name: "contacts" }] | { 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'}] | [{ name:"test2", isRight:true, title:'上传 Excel', click:()=>{ alert('点击') }, render:()=>{ return '...' } }] |
| 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,Contact.id) | - | |
| updateMessage | 修改一条消息 | Function(Message.id,Contact.id,Message) | - | |
| updateMessage | 修改联系人 | Function(Contact.id,Contact) | - | |
| getMessages | 返回所有本地消息，传入 Contact.id 则只返回与该联系人的消息 | Function(Contact.id)=>[Message] | - | |
| getContacts | 返回所有本地联系人 | Function()=>[Contact] | - | |
| openDrawer | 打开联系人右侧抽屉，vnode 为抽屉内容 | Function(vnode) | - | |
| changeDrawer | 切换右侧抽屉显示/隐藏，vnode 为抽屉内容 | Function(vnode) | - | |
| 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) | - |
| 插槽名 | 说明 | 参数 |
|---|---|---|
| cover | 初始化时的封面 | - |
| message-title | 消息列表的标题 | Contact |
| sidebar-message | 左侧最新消息列表插槽 | Contact |
| sidebar-contact | 左侧联系人列表插槽 | Contact |
| sidebar-message-top | 左侧最新消息列表的顶部 | - |
| sidebar-contact-top | 左侧联系人列表的顶部 | - |
| contact-info | 左侧联系人详细页 | 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：上传时的文件 |
Lemon-IMUI 目前内置了file、image、text三种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。
要创建自定义消息首先要确定新消息的 Message 结构。
{
//值为 voice，用于解析的组件 name 必须为 lemonMessageVoice
type: "voice",
content: '语音消息',
//自定义参数
params1:'参数1',
params2:'参数2',
//必传参数
id: "message-id",
//必传参数
fromUser:{
avatar: ""
displayName: "June"
id: "1"
},
//必传参数
sendTime: 1610872045162
//必传参数
status: "succeed"
//必传参数
toContactId: "contact-id"
}
创建用于解析该消息的组件。
{{tip}}
IMUI初始化的时候，设置左侧联系人最新消息的渲染内容
IMUI.setLastContentRender('voice', message => {
return <span>[语音]</span>
})
最后一步，注册组件，必须使用全局注册的方式。
import Vue from 'vue'; import LemonMessageVoice from './lemon-message-voice'; Vue.component(LemonMessageVoice.name,LemonMessageVoice);
如果还有不明白的，可以到 examples/App.vue 查看示例代码