修复切换联系人但消息未变的错误，增加自定义聊天工具栏，增加快捷发送，优化文档
This commit is contained in:
fan
@@ -1,6 +1,5 @@
|
||||
# Lemon IMUI
|
||||
|
||||
[中文文档](docs/APIs_zh.md).
|
||||
基于 VUE 2.0 的 IM 聊天组件
|
||||
|
||||
#### 特性
|
||||
@@ -17,15 +16,15 @@
|
||||
#### 使用
|
||||
|
||||
```javascript
|
||||
import LemonIMUI from 'lemon-imui'
|
||||
import "lemon-imui/dist/index.css";
|
||||
Vue.use(LemonIMUI)
|
||||
import LemonIMUI from 'lemon-imui';
|
||||
import 'lemon-imui/dist/index.css';
|
||||
Vue.use(LemonIMUI);
|
||||
```
|
||||
|
||||
```html
|
||||
<lemon-imui ref="IMUI" />
|
||||
```
|
||||
|
||||
#### 示例
|
||||
#### 示例 · 文档
|
||||
|
||||
[lemon-imui-examples](http://june000.gitee.io/lemon-im).
|
||||
[lemon-imui](http://june000.gitee.io/lemon-im).
|
||||
|
||||
-232
@@ -1,232 +0,0 @@
|
||||
# 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 上传的文件
|
||||
+558
-27
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="logo">
|
||||
<div class="logo-text"><b>Lemon</b> IMUI<span class="logo-badge">{{this.packageData.version}}</span></div>
|
||||
<div class="logo-sub">{{this.packageData.description}}</div>
|
||||
<div class="link"><span>源码下载 </span><a target="_blank" href="https://github.com/fanjyy/lemon-imui">Github</a><a target="_blank" href="https://gitee.com/june000/lemon-im">Gitee</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="imui-center">
|
||||
<lemon-imui
|
||||
:user="user"
|
||||
@@ -16,7 +23,7 @@
|
||||
<template #cover>
|
||||
<div class="cover">
|
||||
<i class="lemon-icon-message"></i>
|
||||
<p><b>Lemon</b> IMUI</p>
|
||||
<p><b>自定义封面 Lemon</b> IMUI</p>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template #contact-info="contact">
|
||||
@@ -37,6 +44,8 @@
|
||||
</template>
|
||||
</lemon-imui>
|
||||
|
||||
|
||||
|
||||
<div class="action">
|
||||
<lemon-button @click="appendMessage">发送消息</lemon-button>
|
||||
<lemon-button @click="updateContact">修改联系人信息</lemon-button>
|
||||
@@ -46,15 +55,438 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="link">
|
||||
<a target="_blank" href="https://github.com/fanjyy/lemon-imui">Github</a>
|
||||
<a target="_blank" href="https://gitee.com/june000/lemon-im">Gitee</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">联系人 Contact</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>参数</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>示例</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">id</td>
|
||||
<td width="350">唯一ID</td>
|
||||
<td width="150">String/Number</td>
|
||||
<td width="100">-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>displayName</td>
|
||||
<td>名称</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>avatar</td>
|
||||
<td>头像</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>会话类型：单聊：single | 群聊：many</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>index</td>
|
||||
<td>通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[A]最近联系人”</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>unread</td>
|
||||
<td>未读消息数</td>
|
||||
<td>Number</td>
|
||||
<td>0</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lastSendTime</td>
|
||||
<td>最近一条消息的时间戳</td>
|
||||
<td>timestamp</td>
|
||||
<td>0</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lastSendTime</td>
|
||||
<td>最近一条消息的内容</td>
|
||||
<td>String | Vnode</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="title">消息体 Message</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>参数</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>示例</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">id</td>
|
||||
<td width="350">唯一ID</td>
|
||||
<td width="150">String/Number</td>
|
||||
<td width="100">-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>status</td>
|
||||
<td>消息发送的状态：going | failed | succeed</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>消息类型：voice | file | video | image | text</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sendTime</td>
|
||||
<td>消息发送时间</td>
|
||||
<td>timestamp</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>消息内容，如果type=file，此属性表示文件的URL地址</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fileSize</td>
|
||||
<td>文件大小</td>
|
||||
<td>Number</td>
|
||||
<td>0</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fileName</td>
|
||||
<td>文件名称</td>
|
||||
<td>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toContactId</td>
|
||||
<td>接收消息的联系人ID</td>
|
||||
<td>String | Number</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fromUser</td>
|
||||
<td>消息发送人的信息</td>
|
||||
<td>Object</td>
|
||||
<td>-</td>
|
||||
<td>{id: "1",displayName: "测试",avatar: "url"};</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="title">组件属性</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>参数</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>示例</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">user</td>
|
||||
<td width="350">用户信息</td>
|
||||
<td width="150">Object</td>
|
||||
<td width="100">-</td>
|
||||
<td>{id: "1",displayName: "测试",avatar: "url"};</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>messageTimeFormat</td>
|
||||
<td>消息列表时间格式化函数</td>
|
||||
<td>Function(time)=>String</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contactTimeFormat</td>
|
||||
<td>联系人时间格式化规则</td>
|
||||
<td>Function(time)=>String</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideDrawer</td>
|
||||
<td>是否隐藏抽屉</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideMenuAvatar</td>
|
||||
<td>是否隐藏导航头像</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hideMenu</td>
|
||||
<td>是否隐藏左侧导航</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="title">组件方法</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>参数</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>示例</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">initMenus</td>
|
||||
<td width="350">初始化导航</td>
|
||||
<td width="150">Function([Object])</td>
|
||||
<td width="100">-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initContacts</td>
|
||||
<td>初始化联系人</td>
|
||||
<td>Function([Contact])</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>initEmoji</td>
|
||||
<td>初始化表情数据</td>
|
||||
<td>Function([Object])</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
<div>
|
||||
有分类：[{
|
||||
label: '默认表情',
|
||||
children: [
|
||||
{
|
||||
name: '1f62c',
|
||||
title: '微笑',
|
||||
src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
|
||||
}
|
||||
]
|
||||
}]
|
||||
</div>
|
||||
<div>
|
||||
无分类：[{
|
||||
name: '1f62c',
|
||||
title: '微笑',
|
||||
src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png'
|
||||
}]
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>appendMessage</td>
|
||||
<td>在当前聊天窗口插入一条新消息, scrollToBottom=true 添加之后滚动到消息窗口底部</td>
|
||||
<td>Function(Message,scrollToBottom=false)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>removeMessage</td>
|
||||
<td>删除聊天消息</td>
|
||||
<td>Function(Message.id,Contact.id)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>updateMessage</td>
|
||||
<td>修改一条消息</td>
|
||||
<td>Function(Message.id,Contact.id,Message)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>updateMessage</td>
|
||||
<td>修改联系人</td>
|
||||
<td>Function(Contact.id,Contact)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getMessages</td>
|
||||
<td>返回所有本地消息，传入 Contact.id 则只返回与该联系人的消息</td>
|
||||
<td>Function(Contact.id)=>[Message]</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getContacts</td>
|
||||
<td>返回所有本地联系人</td>
|
||||
<td>Function()=>[Contact]</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>openDrawer</td>
|
||||
<td>打开联系人右侧抽屉，vnode 为抽屉内容</td>
|
||||
<td>Function(vnode)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>changeDrawer</td>
|
||||
<td>切换右侧抽屉显示/隐藏，vnode 为抽屉内容</td>
|
||||
<td>Function(vnode)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>closeDrawer</td>
|
||||
<td>关闭抽屉</td>
|
||||
<td>Function()</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>changeMenu</td>
|
||||
<td>切换左侧导航</td>
|
||||
<td>Function(Menu.name)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>changeContact</td>
|
||||
<td>切换聊天窗口</td>
|
||||
<td>Function(Contact.id)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>messageViewToBottom</td>
|
||||
<td>将当前聊天窗口滚动到底部</td>
|
||||
<td>Function()</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setLastContentRender</td>
|
||||
<td>设置左侧联系人最新消息的渲染函数</td>
|
||||
<td>Function(Message.type, (Message)=>vnode)</td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
setLastContentRender('image', message => {
|
||||
return <span>[最新图片]</span>
|
||||
})
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lastContentRender</td>
|
||||
<td>用来生成 Message.lastContent 需要的vnode结构。</td>
|
||||
<td>Function(Message)</td>
|
||||
<td>-</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="title">组件插槽</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>插槽名</th>
|
||||
<th>说明</th>
|
||||
<th>参数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">cover</td>
|
||||
<td width="350">初始化时的封面</td>
|
||||
<td width="150">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">contact-title</td>
|
||||
<td width="350">联系人标题</td>
|
||||
<td width="150">Contact</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">message-sidebar</td>
|
||||
<td width="350">左侧消息列表的顶部</td>
|
||||
<td width="150">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">contact-sidebar</td>
|
||||
<td width="350">左侧联系人列表的顶部</td>
|
||||
<td width="150">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">contact-info</td>
|
||||
<td width="350">左侧联系人详细页</td>
|
||||
<td width="150">Contact</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="title">组件事件</div>
|
||||
<table class="table">
|
||||
<tr class="table-head">
|
||||
<th>事件名</th>
|
||||
<th>说明</th>
|
||||
<th>参数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">change-menu</td>
|
||||
<td width="350">当左侧导航选项卡切换的时候会触发该事件</td>
|
||||
<td width="150">Menu.name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">menu-avatar-click</td>
|
||||
<td width="350">当左侧导航内的头像被点击时回触发该事件</td>
|
||||
<td width="150">Contact</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">change-contact</td>
|
||||
<td width="350">当左侧联系人点击时会触发该事件</td>
|
||||
<td width="150">Contact</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">pull-messages</td>
|
||||
<td width="350">当切换聊天对象或者聊天窗口滚动到顶部时会触发该事件，调用next方法结束loading状态，如果设置了isEnd=true，下次聊天窗口滚动到顶部将不会再触发该事件</td>
|
||||
<td width="150">Contact,next([Message],isEnd)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">message-click</td>
|
||||
<td width="350">点击聊天窗口中的消息时会触发该事件</td>
|
||||
<td width="150">event,key,Message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="150">send</td>
|
||||
<td width="350">当发送一条新消息时会触发该事件</td>
|
||||
<td width="150">Message,Function(Message)：调用该函数完成消息发送，可以传入Message来改变消息内容，file：上传时的文件</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import packageData from '../package.json';
|
||||
const getTime = () => {
|
||||
return new Date().getTime();
|
||||
};
|
||||
@@ -93,6 +525,7 @@ export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
packageData,
|
||||
hideMenuAvatar: false,
|
||||
hideMenu: false,
|
||||
user: {
|
||||
@@ -104,6 +537,7 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
const contactData1 = {
|
||||
id: "contact-1",
|
||||
displayName: "工作协作群",
|
||||
@@ -143,6 +577,7 @@ export default {
|
||||
|
||||
const { IMUI } = this.$refs;
|
||||
|
||||
|
||||
let data = [
|
||||
{ ...contactData1 },
|
||||
{ ...contactData2 },
|
||||
@@ -211,6 +646,51 @@ export default {
|
||||
isBottom: true
|
||||
}
|
||||
]);
|
||||
|
||||
IMUI.initEditorTools([
|
||||
{
|
||||
name:'emoji',
|
||||
},
|
||||
{
|
||||
name:'uploadFile',
|
||||
},
|
||||
{
|
||||
name:'uploadImage',
|
||||
},
|
||||
{
|
||||
name:"test1",
|
||||
click:()=>{
|
||||
IMUI.$refs.editor.selectFile("application/vnd.ms-excel")
|
||||
},
|
||||
render:()=>{
|
||||
return <span>Excel</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"test1",
|
||||
click:()=>{
|
||||
IMUI.initEditorTools([
|
||||
{name:'uploadFile'},
|
||||
{name:'emoji'}
|
||||
]);
|
||||
},
|
||||
render:()=>{
|
||||
return <span>重制工具栏</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"test2",
|
||||
isRight:true,
|
||||
title:'上传 Excel',
|
||||
click:()=>{
|
||||
alert('点击了 ··· ')
|
||||
},
|
||||
render:()=>{
|
||||
return <b>···</b>
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
IMUI.initEmoji([
|
||||
{
|
||||
label: "表情",
|
||||
@@ -538,7 +1018,7 @@ export default {
|
||||
...message.fromUser,
|
||||
...this.user
|
||||
};
|
||||
IMUI.appendMessage(message);
|
||||
IMUI.appendMessage(message,true);
|
||||
IMUI.updateContact(contact.id, {
|
||||
unread: "+1",
|
||||
lastSendTime: getTime(),
|
||||
@@ -574,7 +1054,6 @@ export default {
|
||||
this.$refs.IMUI.closeDrawer();
|
||||
},
|
||||
handleSend(message, next, file) {
|
||||
//console.log("Event:send");
|
||||
console.log(message,next,file)
|
||||
setTimeout(() => {
|
||||
next();
|
||||
@@ -583,10 +1062,9 @@ export default {
|
||||
handlePullMessages(contact, next) {
|
||||
const { IMUI } = this.$refs;
|
||||
const otheruser = {
|
||||
id: "hehe",
|
||||
displayName: "I KNOEW",
|
||||
avatar:
|
||||
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
|
||||
id: contact.id,
|
||||
displayName: contact.displayName,
|
||||
avatar:contact.avatar
|
||||
};
|
||||
console.log("Event:pull-messages");
|
||||
const messages = [
|
||||
@@ -618,28 +1096,81 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
::selection{background:#000;color:#fff;}
|
||||
body
|
||||
background #3d495c !important
|
||||
background #f6f6f6 !important
|
||||
#app
|
||||
width 90%
|
||||
margin 0 auto
|
||||
padding-bottom 100px
|
||||
.action
|
||||
margin-top 20px
|
||||
.lemon-button
|
||||
margin-right 10px
|
||||
.link
|
||||
padding 15px 0
|
||||
font-size 14px
|
||||
margin-top 15px
|
||||
a
|
||||
display inline-block
|
||||
font-size 16px
|
||||
color #ccd3dc
|
||||
margin 0 5px
|
||||
text-decoration none
|
||||
border-radius 5px
|
||||
margin-right 15px
|
||||
&:hover
|
||||
color #85acda
|
||||
.action
|
||||
margin-top 30px
|
||||
button
|
||||
margin-right 10px
|
||||
.imui-center
|
||||
background #ffba00
|
||||
border-radius 4px
|
||||
padding 5px 10px
|
||||
color rgba(0,0,0,0.8)
|
||||
.logo
|
||||
position relative
|
||||
display inline-block
|
||||
margin 60px auto
|
||||
user-select none
|
||||
.logo-text
|
||||
font-size 38px
|
||||
.logo-sub
|
||||
font-size 18px
|
||||
color #999
|
||||
font-weight 300
|
||||
.logo-badge
|
||||
position absolute
|
||||
top 50%
|
||||
left 50%
|
||||
transform translate(-50%,-50%)
|
||||
top -10px
|
||||
right -40px
|
||||
background #000
|
||||
border-radius 16px
|
||||
color #f9f9f9
|
||||
font-size 12px
|
||||
padding 4px 8px
|
||||
.title
|
||||
font-size 24px
|
||||
line-height 26px
|
||||
border-left 1px solid #ffba00
|
||||
padding-left 15px
|
||||
margin-bottom 15px
|
||||
margin-top 30px
|
||||
user-select none
|
||||
.table
|
||||
width 100%
|
||||
border-radius 10px
|
||||
background #fff
|
||||
border-collapse collapse
|
||||
tr
|
||||
cursor pointer
|
||||
tr:not(.table-head):hover
|
||||
background #ffba00 !important
|
||||
tr:nth-of-type(even)
|
||||
background #f9f9f9
|
||||
th
|
||||
user-select none
|
||||
color #999
|
||||
td,
|
||||
th
|
||||
text-align left
|
||||
padding 10px 15px
|
||||
font-size 14px
|
||||
font-weight normal
|
||||
.imui-center
|
||||
margin-bottom 60px
|
||||
.lemon-wrapper,
|
||||
.lemon-wrapper--drawer-show .lemon-drawer
|
||||
box-shadow 0 0 30px rgba(0,0,0,0.1);
|
||||
.drawer-content
|
||||
padding 15px
|
||||
.more
|
||||
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -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.08b1f4f3.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.20b5dfe7.js rel=preload as=script><link href=css/index.08b1f4f3.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.20b5dfe7.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.cad2726a.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.6893d2db.js rel=preload as=script><link href=css/index.cad2726a.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.6893d2db.js></script></body></html>
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lemon-imui",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.6",
|
||||
"main": "dist/index.umd.min.js",
|
||||
"description": "基于 VUE2.0 的 IM 聊天组件",
|
||||
"homepage": "https://github.com/fanjyy/lemon-imui",
|
||||
|
||||
@@ -85,6 +85,7 @@ export default {
|
||||
box-sizing border-box
|
||||
overflow hidden
|
||||
background #efefef
|
||||
text-align left
|
||||
p
|
||||
margin 0
|
||||
+m(active)
|
||||
|
||||
+110
-34
@@ -6,24 +6,54 @@ const exec = (val, command = "insertHTML") => {
|
||||
const selection = window.getSelection();
|
||||
let lastSelectionRange;
|
||||
let emojiData = [];
|
||||
let isInitTool = false;
|
||||
export default {
|
||||
name: "LemonEditor",
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
tools:{
|
||||
type:Array,
|
||||
default:()=>[],
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
submitDisabled: true,
|
||||
proxyTools:[],
|
||||
accept: ""
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
//this.$refs.fileInput.addEventListener("change", this._handleChangeFile);
|
||||
created() {
|
||||
if(this.tools && this.tools.length > 0){
|
||||
this.initTools(this.tools);
|
||||
}else{
|
||||
this.initTools([{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]);
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
render() {
|
||||
//<a-popover trigger="click" overlay-class-name="lemon-editor__emoji">
|
||||
const toolLeft = [];
|
||||
const toolRight = [];
|
||||
this.proxyTools.forEach(({name, title, render, click,isRight})=>{
|
||||
click = click || new Function();
|
||||
const classes = ['lemon-editor__tool-item',{'lemon-editor__tool-item--right':isRight}];
|
||||
let node;
|
||||
if(name=='emoji'){
|
||||
node = emojiData.length == 0 ? '' : <lemon-popover class="lemon-editor__emoji">
|
||||
<template slot="content">{this._renderEmojiTabs()}</template>
|
||||
<div class={classes} title={title}>
|
||||
{render()}
|
||||
</div>
|
||||
</lemon-popover>
|
||||
}else{
|
||||
node = <div class={classes} on-click={click} title={title}>{render()}</div>
|
||||
}
|
||||
if(isRight){
|
||||
toolRight.push(node);
|
||||
}else{
|
||||
toolLeft.push(node);
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="lemon-editor">
|
||||
<input
|
||||
@@ -35,26 +65,8 @@ export default {
|
||||
onChange={this._handleChangeFile}
|
||||
/>
|
||||
<div class="lemon-editor__tool">
|
||||
{emojiData.length > 0 && (
|
||||
<lemon-popover class="lemon-editor__emoji">
|
||||
<template slot="content">{this._renderEmojiTabs()}</template>
|
||||
<div class="lemon-editor__tool-item">
|
||||
<i class="lemon-icon-emoji" />
|
||||
</div>
|
||||
</lemon-popover>
|
||||
)}
|
||||
<div
|
||||
class="lemon-editor__tool-item"
|
||||
on-click={() => this._handleSelectFile("*")}
|
||||
>
|
||||
<i class="lemon-icon-folder" />
|
||||
</div>
|
||||
<div
|
||||
class="lemon-editor__tool-item"
|
||||
on-click={() => this._handleSelectFile("image/*")}
|
||||
>
|
||||
<i class="lemon-icon-image" />
|
||||
</div>
|
||||
<div class="lemon-editor__tool-left">{toolLeft}</div>
|
||||
<div class="lemon-editor__tool-right">{toolRight}</div>
|
||||
</div>
|
||||
<div class="lemon-editor__inner">
|
||||
<div
|
||||
@@ -84,6 +96,60 @@ export default {
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化工具栏
|
||||
*/
|
||||
initTools(data){
|
||||
if(!data) return;
|
||||
console.log('initTools',data);
|
||||
const defaultTools = [
|
||||
{
|
||||
name: 'emoji',
|
||||
title: "表情",
|
||||
click: null,
|
||||
render: menu => {
|
||||
return <i class="lemon-icon-emoji" />;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'uploadFile',
|
||||
title: "文件上传",
|
||||
click: () => this.selectFile("*"),
|
||||
render: menu => {
|
||||
return <i class="lemon-icon-folder" />;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'uploadImage',
|
||||
title: "图片上传",
|
||||
click: ()=>this.selectFile("image/*"),
|
||||
render: menu => {
|
||||
return <i class="lemon-icon-image" />;
|
||||
},
|
||||
}
|
||||
];
|
||||
let tools = [];
|
||||
if (Array.isArray(data)) {
|
||||
const indexMap = {
|
||||
emoji: 0,
|
||||
uploadFile: 1,
|
||||
uploadImage:2,
|
||||
};
|
||||
const indexKeys = Object.keys(indexMap);
|
||||
tools = data.map(item => {
|
||||
if (indexKeys.includes(item.name)) {
|
||||
return {
|
||||
...defaultTools[indexMap[item.name]],
|
||||
...item,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
tools = defaultTools;
|
||||
}
|
||||
this.proxyTools = tools;
|
||||
},
|
||||
_saveLastRange() {
|
||||
lastSelectionRange = selection.getRangeAt(0);
|
||||
},
|
||||
@@ -133,7 +199,7 @@ export default {
|
||||
exec(`<img emoji-name="${item.name}" src="${item.src}"></img>`);
|
||||
this._saveLastRange();
|
||||
},
|
||||
async _handleSelectFile(accept) {
|
||||
async selectFile(accept) {
|
||||
this.accept = accept;
|
||||
await this.$nextTick();
|
||||
this.$refs.fileInput.click();
|
||||
@@ -153,11 +219,9 @@ export default {
|
||||
//this._checkSubmitDisabled();
|
||||
},
|
||||
_handleKeydown(e) {
|
||||
const { keyCode } = e;
|
||||
if (keyCode == 13) {
|
||||
// e.preventDefault();
|
||||
// document.execCommand("defaultParagraphSeparator", false, false);
|
||||
// exec("<br>");
|
||||
const { keyCode,ctrlKey } = e;
|
||||
if (keyCode == 13 && ctrlKey === true) {
|
||||
this._handleSend();
|
||||
}
|
||||
},
|
||||
getFormatValue() {
|
||||
@@ -204,18 +268,30 @@ gap = 10px;
|
||||
display flex
|
||||
height 40px
|
||||
align-items center
|
||||
padding-left 5px
|
||||
justify-content space-between
|
||||
padding 0 5px
|
||||
+e(tool-left){
|
||||
display flex
|
||||
}
|
||||
+e(tool-right){
|
||||
display flex
|
||||
}
|
||||
+e(tool-item)
|
||||
cursor pointer
|
||||
padding 4px gap
|
||||
height 28px
|
||||
line-height 24px;
|
||||
color #999
|
||||
transition all ease .3s
|
||||
font-size 12px
|
||||
[class^='lemon-icon-']
|
||||
line-height 26px
|
||||
font-size 22px
|
||||
&:hover
|
||||
color #333
|
||||
+m(right){
|
||||
margin-left:auto;
|
||||
}
|
||||
+e(inner)
|
||||
flex 1
|
||||
overflow-x hidden
|
||||
|
||||
@@ -56,11 +56,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
drawerVisible: !this.hideDrawer,
|
||||
currentContactId: "",
|
||||
currentMessagesId: "",
|
||||
currentContactId:null,
|
||||
currentMessagesId:null,
|
||||
activeSidebar: DEFAULT_MENU_LASTMESSAGES,
|
||||
contacts: [],
|
||||
menus: []
|
||||
menus: [],
|
||||
editorTools:[],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -125,9 +126,19 @@ export default {
|
||||
...message
|
||||
};
|
||||
},
|
||||
appendMessage(message, contactId = this.currentContactId) {
|
||||
this._addMessage(message, contactId, 1);
|
||||
this.messageViewToBottom();
|
||||
/**
|
||||
* 在当前聊天窗口新增一条消息
|
||||
*/
|
||||
appendMessage(message,scrollToBottom = false) {
|
||||
if(!this.currentContactId) return false;
|
||||
this._addMessage(message, this.currentContactId, 1);
|
||||
if(scrollToBottom == true){
|
||||
this.messageViewToBottom();
|
||||
}
|
||||
this.updateContact(this.currentContactId, {
|
||||
lastContent: this.lastContentRender(message),
|
||||
lastSendTime: message.sendTime
|
||||
});
|
||||
},
|
||||
_emitSend(message, next, file) {
|
||||
this.$emit(
|
||||
@@ -143,7 +154,7 @@ export default {
|
||||
},
|
||||
_handleSend(text) {
|
||||
const message = this._createMessage({ content: text });
|
||||
this.appendMessage(message);
|
||||
this.appendMessage(message,true);
|
||||
this._emitSend(message, () => {
|
||||
this.updateContact(message.toContactId, {
|
||||
lastContent: this.lastContentRender(message),
|
||||
@@ -168,7 +179,7 @@ export default {
|
||||
};
|
||||
}
|
||||
const message = this._createMessage(joinMessage);
|
||||
this.appendMessage(message);
|
||||
this.appendMessage(message,true);
|
||||
this._emitSend(
|
||||
message,
|
||||
() => {
|
||||
@@ -323,7 +334,9 @@ export default {
|
||||
contact: contact,
|
||||
simple: true
|
||||
},
|
||||
() => this.changeContact(contact.id)
|
||||
() => {
|
||||
this.changeContact(contact.id)
|
||||
}
|
||||
)
|
||||
];
|
||||
prevIndex = contact.index;
|
||||
@@ -401,6 +414,7 @@ export default {
|
||||
/>
|
||||
<lemon-editor
|
||||
ref="editor"
|
||||
tools={this.editorTools}
|
||||
onSend={this._handleSend}
|
||||
onUpload={this._handleUpload}
|
||||
/>
|
||||
@@ -496,21 +510,21 @@ export default {
|
||||
this.changeMenu(menuName);
|
||||
}
|
||||
this.currentContactId = contactId;
|
||||
|
||||
this.$emit("change-contact", this.currentContact);
|
||||
if (isFunction(this.currentContact.renderContainer)) {
|
||||
return;
|
||||
}
|
||||
if (this._menuIsMessages()) {
|
||||
if (!CacheMessageLoaded.has(contactId)) {
|
||||
this.$refs.messages.resetLoadState();
|
||||
}
|
||||
if (!messages[contactId]) {
|
||||
this._emitPullMessages(isEnd => this.messageViewToBottom());
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.messageViewToBottom();
|
||||
}, 0);
|
||||
}
|
||||
if (!CacheMessageLoaded.has(contactId)) {
|
||||
this.$refs.messages.resetLoadState();
|
||||
}
|
||||
if (!messages[contactId]) {
|
||||
this._emitPullMessages(isEnd => this.messageViewToBottom());
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.currentMessagesId = this.currentContactId;
|
||||
this.messageViewToBottom();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -583,6 +597,14 @@ export default {
|
||||
}
|
||||
data.forEach(({ name, src }) => (emojiMap[name] = src));
|
||||
},
|
||||
initEditorTools(data){
|
||||
this.editorTools = data;
|
||||
this.$refs.editor.initTools(data);
|
||||
// if(this.editorTools){
|
||||
// this.$refs.editor.initTools(data);
|
||||
// }
|
||||
//this.$refs.editor.$forceUpdate();
|
||||
},
|
||||
/**
|
||||
* 初始化左侧按钮
|
||||
* @param {Array<Menu>} data 按钮数据
|
||||
@@ -715,23 +737,6 @@ export default {
|
||||
getMessages(contactId) {
|
||||
return (contactId ? messages[contactId] : messages) || [];
|
||||
},
|
||||
// appendContact(data) {
|
||||
// this._addContact(data, 0);
|
||||
// },
|
||||
// prependContact(data) {
|
||||
// this._addContact(data, 1);
|
||||
// },
|
||||
// addContactMessage(data) {
|
||||
// this._addContact(data, 0);
|
||||
// },
|
||||
// prependContactMessage(data) {
|
||||
// this._addContact(data, 1);
|
||||
// },
|
||||
// appendMessage(data) {},
|
||||
// prependMessage(data) {},
|
||||
// removeContact(contactId) {},
|
||||
// removeContactMessage(contactId) {},
|
||||
// removeContactAll(contactId) {},
|
||||
/**
|
||||
* 将自定义的HTML显示在主窗口内
|
||||
*/
|
||||
@@ -819,6 +824,7 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
color #666
|
||||
font-size 12px
|
||||
margin 0
|
||||
text-align left
|
||||
+b(lemon-contact--active)
|
||||
background #d9d9d9
|
||||
+b(lemon-container)
|
||||
|
||||
Reference in New Issue
Block a user