fan
233 lines
4.7 KiB
Markdown
233 lines
4.7 KiB
Markdown
# Lemon-IMUI
|
|
|
|
### Contents
|
|
|
|
- contact
|
|
```javascript
|
|
{
|
|
//用户唯一ID
|
|
id: "",
|
|
//昵称
|
|
displayName: "工作协作群",
|
|
//头像URL
|
|
avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
|
|
//会话类型 single | many
|
|
type: "single",
|
|
//通讯录索引，默认根据字母排序，也可以手动排序“[1]最近联系人”
|
|
index: "A",
|
|
//未读消息
|
|
unread: 0,
|
|
//最近消息时间
|
|
lastSendTime: 1566047865417,
|
|
//最近消息内容
|
|
lastContent: "2"
|
|
}
|
|
```
|
|
- message
|
|
```javascript
|
|
{
|
|
//消息唯一ID
|
|
id: "",
|
|
status: "succeed",
|
|
//消息类型 voice | file | video | image | text
|
|
type: "text",
|
|
//消息发送时间
|
|
sendTime: 1572415923000,
|
|
//消息内容 | URL
|
|
content: generateRandWord(),
|
|
//文件大小
|
|
fileSize: 1231,
|
|
//文件名称
|
|
fileName: "asdasd.doc",
|
|
//当前会话ID
|
|
toContactId:"",
|
|
//发送消息的用户
|
|
fromUser:{
|
|
id: "system",
|
|
displayName: "系统测试",
|
|
avatar: "http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg"
|
|
};
|
|
}
|
|
```
|
|
- menu
|
|
```javascript
|
|
{
|
|
//导航名称， 保留字段 lastMessages 和 contacts
|
|
name: "custom1",
|
|
//鼠标停留时显示文字
|
|
title: "自定义按钮1",
|
|
//未读角标
|
|
unread: 0,
|
|
//外观
|
|
render: menu => {
|
|
return <i class="lemon-icon-attah" />;
|
|
},
|
|
//打开内容
|
|
renderContainer: () => {
|
|
return <div>自定义</div>;
|
|
},
|
|
//强制显示在底部
|
|
isBottom: true
|
|
}
|
|
```
|
|
|
|
### Props
|
|
|
|
- user
|
|
```javascript
|
|
{
|
|
id:'',
|
|
avatar:'',
|
|
displayName:'',
|
|
}
|
|
```
|
|
个人信息
|
|
- currentContactId
|
|
当前会话联系人 ID
|
|
- currentContact
|
|
当前会话联系人信息
|
|
- messageTimeFormat
|
|
消息列表时间格式化函数
|
|
- contactTimeFormat
|
|
联系人时间格式化规则
|
|
- hideDrawer
|
|
是否隐藏抽屉
|
|
- hideMenuAvatar
|
|
是否隐藏导航头像
|
|
- hideMenuAvatar
|
|
是否隐藏导航
|
|
|
|
### Methods
|
|
|
|
- initMenus([menu]);
|
|
初始化导航
|
|
- initContacts([contact]);
|
|
初始化联系人
|
|
- initEmoji()
|
|
初始化表情
|
|
```javascript
|
|
IMUI.initEmoji([
|
|
{
|
|
label: '表情',
|
|
children: [
|
|
{
|
|
name: '1f600',
|
|
title: '微笑',
|
|
src: 'https://twemoji.maxcdn.com/2/72x72/1f600.png'
|
|
},
|
|
{
|
|
name: '1f62c',
|
|
title: '微笑',
|
|
src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '收藏',
|
|
children: [
|
|
{
|
|
name: '1f62c',
|
|
title: '微笑',
|
|
src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
|
|
}
|
|
]
|
|
}
|
|
])
|
|
```
|
|
- appendMessage(message)
|
|
在当前聊天窗口插入新消息
|
|
|
|
- removeMessage(messageId, contactId)
|
|
删除聊天消息
|
|
|
|
- updateMessage(messageId, contactId, message)
|
|
修改聊天聊天消息
|
|
|
|
- updateContact(contactId,contact)
|
|
修改联系人
|
|
|
|
- getMessages(contactId)
|
|
返回所有本地消息，传入 contactId 只返回与该联系人的消息
|
|
|
|
- getContacts()
|
|
获取所有联系人
|
|
|
|
- openDrawer(vnode)
|
|
打开抽屉
|
|
|
|
- closeDrawer()
|
|
关闭抽屉
|
|
|
|
- changeDrawer(vnode)
|
|
切换抽屉显示
|
|
|
|
- changeMenu(menuName)
|
|
切换导航
|
|
|
|
- changeContact(contactId)
|
|
切换聊天对象
|
|
|
|
- messageViewToBottom()
|
|
将当前聊天窗口滚动到底部
|
|
|
|
- setLastContentRender(messageType, render)
|
|
配置联系人列表最新消息的渲染函数
|
|
|
|
```javascript
|
|
IMUI.setLastContentRender('image', message => {
|
|
return <span>[最新图片]</span>
|
|
})
|
|
```
|
|
|
|
- lastContentRender(message)
|
|
根据 message 渲染联系人列表最新消息 DOM
|
|
```javascript
|
|
IMUI.updateContact(contact.id, {
|
|
lastContent: IMUI.lastContentRender(message)
|
|
})
|
|
```
|
|
|
|
### Scoped Slot
|
|
|
|
- cover
|
|
自定义聊天封面
|
|
|
|
- contact-title 参数{ contact }
|
|
自定义联系人标题
|
|
|
|
- message-sidebar
|
|
插入到最新消息列顶部
|
|
|
|
- contact-sidebar
|
|
插入到联系人列顶部
|
|
|
|
- contact-info 参数{ contact }
|
|
自定义联系人信息
|
|
|
|
### Events
|
|
|
|
- change-menu(menuName)
|
|
切换导航
|
|
|
|
- change-contact(contact)
|
|
切换导航会话
|
|
|
|
- pull-messages(contact,next)
|
|
拉取新消息
|
|
|
|
- next([message],isEnd) [isEnd 是否无更多数据]
|
|
|
|
- message-click(event, key, message)
|
|
|
|
- event 事件
|
|
- key 触发目标
|
|
- message 消息内容
|
|
|
|
- menu-avatar-click()
|
|
点击导航头像
|
|
|
|
- send(message, next, file)
|
|
- message 当前消息体
|
|
- next(message) 调用该函数完成消息发送
|
|
- file 上传的文件
|