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

修复切换联系人但消息未变的错误，增加自定义聊天工具栏，增加快捷发送，优化文档

Browse Source
This commit is contained in:
fan
2021-01-17 00:26:29 +08:00
parent a450101dbe
commit d81c431315
12 changed files with 721 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5 -6
View File
@@ -1,6 +1,5 @@
# Lemon IMUI # Lemon IMUI
[中文文档](docs/APIs_zh.md).
基于 VUE 2.0 的 IM 聊天组件 基于 VUE 2.0 的 IM 聊天组件
#### 特性 #### 特性
@@ -17,15 +16,15 @@
#### 使用 #### 使用
```javascript ```javascript
import LemonIMUI from 'lemon-imui' import LemonIMUI from 'lemon-imui';
import "lemon-imui/dist/index.css"; import 'lemon-imui/dist/index.css';
Vue.use(LemonIMUI) Vue.use(LemonIMUI);
``` ```
```html ```html
<lemon-imui ref="IMUI" /> <lemon-imui ref="IMUI" />
``` ```
#### 示例 #### 示例 · 文档
[lemon-imui-examples](http://june000.gitee.io/lemon-im). [lemon-imui](http://june000.gitee.io/lemon-im).
docs/APIs_zh.md
-232
View File
@@ -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 上传的文件
examples/App.vue
+558 -27
View File
@@ -1,5 +1,12 @@
<template> <template>
<div id="app"> <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>源码下载&nbsp;&nbsp;</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"> <div class="imui-center">
<lemon-imui <lemon-imui
:user="user" :user="user"
@@ -16,7 +23,7 @@
<template #cover> <template #cover>
<div class="cover"> <div class="cover">
<i class="lemon-icon-message"></i> <i class="lemon-icon-message"></i>
<p><b>Lemon</b> IMUI</p> <p><b>自定义封面 Lemon</b> IMUI</p>
</div> </div>
</template> </template>
<!-- <template #contact-info="contact"> <!-- <template #contact-info="contact">
@@ -37,6 +44,8 @@
</template> </template>
</lemon-imui> </lemon-imui>
<div class="action"> <div class="action">
<lemon-button @click="appendMessage">发送消息</lemon-button> <lemon-button @click="appendMessage">发送消息</lemon-button>
<lemon-button @click="updateContact">修改联系人信息</lemon-button> <lemon-button @click="updateContact">修改联系人信息</lemon-button>
@@ -46,15 +55,438 @@
> >
</div> </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>
<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> </div>
</template> </template>
<script> <script>
import packageData from '../package.json';
const getTime = () => { const getTime = () => {
return new Date().getTime(); return new Date().getTime();
}; };
@@ -93,6 +525,7 @@ export default {
name: "app", name: "app",
data() { data() {
return { return {
packageData,
hideMenuAvatar: false, hideMenuAvatar: false,
hideMenu: false, hideMenu: false,
user: { user: {
@@ -104,6 +537,7 @@ export default {
}; };
}, },
mounted() { mounted() {
const contactData1 = { const contactData1 = {
id: "contact-1", id: "contact-1",
displayName: "工作协作群", displayName: "工作协作群",
@@ -143,6 +577,7 @@ export default {
const { IMUI } = this.$refs; const { IMUI } = this.$refs;
let data = [ let data = [
{ ...contactData1 }, { ...contactData1 },
{ ...contactData2 }, { ...contactData2 },
@@ -211,6 +646,51 @@ export default {
isBottom: true 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([ IMUI.initEmoji([
{ {
label: "表情", label: "表情",
@@ -538,7 +1018,7 @@ export default {
...message.fromUser, ...message.fromUser,
...this.user ...this.user
}; };
IMUI.appendMessage(message); IMUI.appendMessage(message,true);
IMUI.updateContact(contact.id, { IMUI.updateContact(contact.id, {
unread: "+1", unread: "+1",
lastSendTime: getTime(), lastSendTime: getTime(),
@@ -574,7 +1054,6 @@ export default {
this.$refs.IMUI.closeDrawer(); this.$refs.IMUI.closeDrawer();
}, },
handleSend(message, next, file) { handleSend(message, next, file) {
//console.log("Event:send");
console.log(message,next,file) console.log(message,next,file)
setTimeout(() => { setTimeout(() => {
next(); next();
@@ -583,10 +1062,9 @@ export default {
handlePullMessages(contact, next) { handlePullMessages(contact, next) {
const { IMUI } = this.$refs; const { IMUI } = this.$refs;
const otheruser = { const otheruser = {
id: "hehe", id: contact.id,
displayName: "I KNOEW", displayName: contact.displayName,
avatar: avatar:contact.avatar
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
}; };
console.log("Event:pull-messages"); console.log("Event:pull-messages");
const messages = [ const messages = [
@@ -618,28 +1096,81 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
::selection{background:#000;color:#fff;}
body 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 .link
padding 15px 0 font-size 14px
margin-top 15px
a a
display inline-block display inline-block
font-size 16px margin 0 5px
color #ccd3dc
text-decoration none text-decoration none
border-radius 5px background #ffba00
margin-right 15px border-radius 4px
&:hover padding 5px 10px
color #85acda color rgba(0,0,0,0.8)
.action .logo
margin-top 30px position relative
button display inline-block
margin-right 10px margin 60px auto
.imui-center user-select none
.logo-text
font-size 38px
.logo-sub
font-size 18px
color #999
font-weight 300
.logo-badge
position absolute position absolute
top 50% top -10px
left 50% right -40px
transform translate(-50%,-50%) 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 .drawer-content
padding 15px padding 15px
.more .more
examples/dist/css/index.08b1f4f3.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/css/index.cad2726a.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
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.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>
examples/dist/js/index.20b5dfe7.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.6893d2db.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "lemon-imui", "name": "lemon-imui",
"version": "1.0.4", "version": "1.0.6",
"main": "dist/index.umd.min.js", "main": "dist/index.umd.min.js",
"description": "基于 VUE2.0 的 IM 聊天组件", "description": "基于 VUE2.0 的 IM 聊天组件",
"homepage": "https://github.com/fanjyy/lemon-imui", "homepage": "https://github.com/fanjyy/lemon-imui",
packages/components/contact.vue
+1
View File
@@ -85,6 +85,7 @@ export default {
box-sizing border-box box-sizing border-box
overflow hidden overflow hidden
background #efefef background #efefef
text-align left
p p
margin 0 margin 0
+m(active) +m(active)
packages/components/editor.vue
+110 -34
View File
@@ -6,24 +6,54 @@ const exec = (val, command = "insertHTML") => {
const selection = window.getSelection(); const selection = window.getSelection();
let lastSelectionRange; let lastSelectionRange;
let emojiData = []; let emojiData = [];
let isInitTool = false;
export default { export default {
name: "LemonEditor", name: "LemonEditor",
components: {}, components: {},
props: {}, props: {
tools:{
type:Array,
default:()=>[],
}
},
data() { data() {
return { return {
submitDisabled: true, submitDisabled: true,
proxyTools:[],
accept: "" accept: ""
}; };
}, },
created() {}, created() {
mounted() { if(this.tools && this.tools.length > 0){
//this.$refs.fileInput.addEventListener("change", this._handleChangeFile); this.initTools(this.tools);
}else{
this.initTools([{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]);
}
}, },
computed: {},
watch: {},
render() { 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 ( return (
<div class="lemon-editor"> <div class="lemon-editor">
<input <input
@@ -35,26 +65,8 @@ export default {
onChange={this._handleChangeFile} onChange={this._handleChangeFile}
/> />
<div class="lemon-editor__tool"> <div class="lemon-editor__tool">
{emojiData.length > 0 && ( <div class="lemon-editor__tool-left">{toolLeft}</div>
<lemon-popover class="lemon-editor__emoji"> <div class="lemon-editor__tool-right">{toolRight}</div>
<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> </div>
<div class="lemon-editor__inner"> <div class="lemon-editor__inner">
<div <div
@@ -84,6 +96,60 @@ export default {
); );
}, },
methods: { 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() { _saveLastRange() {
lastSelectionRange = selection.getRangeAt(0); lastSelectionRange = selection.getRangeAt(0);
}, },
@@ -133,7 +199,7 @@ export default {
exec(`<img emoji-name="${item.name}" src="${item.src}"></img>`); exec(`<img emoji-name="${item.name}" src="${item.src}"></img>`);
this._saveLastRange(); this._saveLastRange();
}, },
async _handleSelectFile(accept) { async selectFile(accept) {
this.accept = accept; this.accept = accept;
await this.$nextTick(); await this.$nextTick();
this.$refs.fileInput.click(); this.$refs.fileInput.click();
@@ -153,11 +219,9 @@ export default {
//this._checkSubmitDisabled(); //this._checkSubmitDisabled();
}, },
_handleKeydown(e) { _handleKeydown(e) {
const { keyCode } = e; const { keyCode,ctrlKey } = e;
if (keyCode == 13) { if (keyCode == 13 && ctrlKey === true) {
// e.preventDefault(); this._handleSend();
// document.execCommand("defaultParagraphSeparator", false, false);
// exec("<br>");
} }
}, },
getFormatValue() { getFormatValue() {
@@ -204,18 +268,30 @@ gap = 10px;
display flex display flex
height 40px height 40px
align-items center 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) +e(tool-item)
cursor pointer cursor pointer
padding 4px gap padding 4px gap
height 28px height 28px
line-height 24px;
color #999 color #999
transition all ease .3s transition all ease .3s
font-size 12px
[class^='lemon-icon-'] [class^='lemon-icon-']
line-height 26px line-height 26px
font-size 22px font-size 22px
&:hover &:hover
color #333 color #333
+m(right){
margin-left:auto;
}
+e(inner) +e(inner)
flex 1 flex 1
overflow-x hidden overflow-x hidden
packages/components/index.vue
+43 -37
View File
@@ -56,11 +56,12 @@ export default {
data() { data() {
return { return {
drawerVisible: !this.hideDrawer, drawerVisible: !this.hideDrawer,
currentContactId: "", currentContactId:null,
currentMessagesId: "", currentMessagesId:null,
activeSidebar: DEFAULT_MENU_LASTMESSAGES, activeSidebar: DEFAULT_MENU_LASTMESSAGES,
contacts: [], contacts: [],
menus: [] menus: [],
editorTools:[],
}; };
}, },
@@ -125,9 +126,19 @@ export default {
...message ...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) { _emitSend(message, next, file) {
this.$emit( this.$emit(
@@ -143,7 +154,7 @@ export default {
}, },
_handleSend(text) { _handleSend(text) {
const message = this._createMessage({ content: text }); const message = this._createMessage({ content: text });
this.appendMessage(message); this.appendMessage(message,true);
this._emitSend(message, () => { this._emitSend(message, () => {
this.updateContact(message.toContactId, { this.updateContact(message.toContactId, {
lastContent: this.lastContentRender(message), lastContent: this.lastContentRender(message),
@@ -168,7 +179,7 @@ export default {
}; };
} }
const message = this._createMessage(joinMessage); const message = this._createMessage(joinMessage);
this.appendMessage(message); this.appendMessage(message,true);
this._emitSend( this._emitSend(
message, message,
() => { () => {
@@ -323,7 +334,9 @@ export default {
contact: contact, contact: contact,
simple: true simple: true
}, },
() => this.changeContact(contact.id) () => {
this.changeContact(contact.id)
}
) )
]; ];
prevIndex = contact.index; prevIndex = contact.index;
@@ -401,6 +414,7 @@ export default {
/> />
<lemon-editor <lemon-editor
ref="editor" ref="editor"
tools={this.editorTools}
onSend={this._handleSend} onSend={this._handleSend}
onUpload={this._handleUpload} onUpload={this._handleUpload}
/> />
@@ -496,21 +510,21 @@ export default {
this.changeMenu(menuName); this.changeMenu(menuName);
} }
this.currentContactId = contactId; this.currentContactId = contactId;
this.$emit("change-contact", this.currentContact); this.$emit("change-contact", this.currentContact);
if (isFunction(this.currentContact.renderContainer)) { if (isFunction(this.currentContact.renderContainer)) {
return; return;
} }
if (this._menuIsMessages()) { if (!CacheMessageLoaded.has(contactId)) {
if (!CacheMessageLoaded.has(contactId)) { this.$refs.messages.resetLoadState();
this.$refs.messages.resetLoadState(); }
} if (!messages[contactId]) {
if (!messages[contactId]) { this._emitPullMessages(isEnd => this.messageViewToBottom());
this._emitPullMessages(isEnd => this.messageViewToBottom()); } else {
} else { setTimeout(() => {
setTimeout(() => { this.currentMessagesId = this.currentContactId;
this.messageViewToBottom(); this.messageViewToBottom();
}, 0); }, 0);
}
} }
}, },
/** /**
@@ -583,6 +597,14 @@ export default {
} }
data.forEach(({ name, src }) => (emojiMap[name] = src)); 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 按钮数据 * @param {Array<Menu>} data 按钮数据
@@ -715,23 +737,6 @@ export default {
getMessages(contactId) { getMessages(contactId) {
return (contactId ? messages[contactId] : messages) || []; 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显示在主窗口内 * 将自定义的HTML显示在主窗口内
*/ */
@@ -819,6 +824,7 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
color #666 color #666
font-size 12px font-size 12px
margin 0 margin 0
text-align left
+b(lemon-contact--active) +b(lemon-contact--active)
background #d9d9d9 background #d9d9d9
+b(lemon-container) +b(lemon-container)