robin/lemon-imui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE

Browse Source
This commit is contained in:
fan
2019-10-30 17:43:26 +08:00
parent 22b09939d9
commit f6797fa1e5
8 changed files with 262 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+17 -5
View File
@@ -1,5 +1,6 @@
# Lemon IMUI
[中文文档](docs/APIs_zh.md).
基于 VUE 2.0 的 IM 聊天组件
#### 特性
@@ -9,10 +10,21 @@
- 不依赖任何第三方组件库
- 可任意扩展的聊天消息类型
#### 在线示例
[lemon-imui-examples](http://june000.gitee.io/lemon-im).
#### 安装使用
#### 安装
> npm install lemon-imui -S
#### 使用
```javascript
import LemonIMUI from 'lemon-imui'
Vue.use(LemonIMUI)
```
```html
<lemon-imui ref="IMUI" />
```
#### 示例
[lemon-imui-examples](http://june000.gitee.io/lemon-im).
docs/APIs_zh.md
+232
View File
@@ -0,0 +1,232 @@
# API
### 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 上传的文件
examples/App.vue
+11 -10
View File
@@ -22,12 +22,6 @@
<!-- <template #contact-info="contact">
<span style="color:blue">contact-info {{ contact }}</span>
</template> -->
<!--
<template #drawer="contact">
<h1>自定义抽屉内容</h1>
<p>{{ contact }}</p>
</template>
-->
<template #contact-title="contact">
<span>{{ contact.displayName }}</span>
<small class="more" @click="changeDrawer(contact)">&#8230;</small>
@@ -489,11 +483,17 @@ export default {
]
},
{
label: "武器",
label: "收藏",
children: [
{
name: "wx",
src: "http://"
name: "1f62c",
title: "微笑",
src: "https://twemoji.maxcdn.com/2/72x72/1f62c.png"
},
{
name: "1f621",
title: "微笑",
src: "https://twemoji.maxcdn.com/2/72x72/1f621.png"
}
]
}
@@ -569,7 +569,8 @@ export default {
this.$refs.IMUI.closeDrawer();
},
handleSend(message, next, file) {
console.log("Event:send");
//console.log("Event:send");
console.log(message,next,file)
setTimeout(() => {
next();
}, 1000);
examples/dist/index.html
Vendored
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.3794e733.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.3794e733.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f8f6fe72.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f8f6fe72.js></script></body></html>
examples/dist/js/index.3794e733.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.f8f6fe72.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
packages/components/editor.vue
-23
View File
@@ -116,7 +116,6 @@ export default {
return (
<div slot="tab-pane" index={index} tab={item.label}>
{renderImageGrid(item.children)}
{renderImageGrid(item.children)}
</div>
);
});
@@ -191,28 +190,6 @@ export default {
initEmoji(data) {
emojiData = data;
this.$forceUpdate();
// this.emoji = [
// {
// label: "表情",
// name: "face",
// data: [
// {
// name: "wx",
// src: "微笑"
// }
// ]
// },
// {
// label: "武器",
// name: "wa",
// data: [
// {
// name: "wx",
// src: "微笑"
// }
// ]
// }
// ];
}
}
};
packages/components/index.vue
-17
View File
@@ -123,22 +123,7 @@ export default {
},
...message
};
// const message = {
// id: "123",
// status: "succeed",
// type: "image",
// sendTime: 12312312312,
// content: "asdas",
// fromContactId: "123",
// fromUser: { id: "123", displayName: "123", avatar: "123",}
// }
},
// _setDefMessages(id) {
// //this.messages[id] = this.messages[id] || [];
// if (!messages[id]) {
// this.$set(messages, id, []);
// }
// },
appendMessage(message, contactId = this.currentContactId) {
this._addMessage(message, contactId, 1);
this.messageViewToBottom();
@@ -584,8 +569,6 @@ export default {
changeMenu(name) {
this.$emit("change-menu", name);
this.activeSidebar = name;
// const { renderContainer } = this.currentMenu;
// this._customContainerReady(renderContainer, CacheMenuContainer, name);
},
/**
* 初始化编辑框的 Emoji 表情列表，是 Lemon-editor.initEmoji 的代理方法