This commit is contained in:
fan committed 2019-10-30 17:43:26 +08:00
1 parent 22b09939d9
commit f6797fa1e5
8 files changed
+262 -57

No files matched your search

+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).
+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 上传的文件
+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);
+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>
-1
View File
@@ -1 +0,0 @@
(function(e){function t(t){for(var i,s,o=t[0],c=t[1],l=t[2],m=0,d=[];m<o.length;m++)s=o[m],a[s]&&d.push(a[s][0]),a[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);u&&u(t);while(d.length)d.shift()();return r.push.apply(r,l||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var i={},a={index:0},r=[];function s(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=i,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(n,i,function(t){return e[t]}.bind(null,i));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=t,o=o.slice();for(var l=0;l<o.length;l++)t(o[l]);var u=c;r.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("c31f")},"04f4":function(e,t,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(e,t,n){},"0e15":function(e,t,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(e,t,n){},"107a":function(e,t,n){},"15cf":function(e,t,n){},1663:function(e,t,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(e,t,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(e,t,n){},"2ec9":function(e,t){},3423:function(e,t,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(e,t,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(e,t,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(e,t,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(e,t,n){},"6da9":function(e,t,n){},7802:function(e,t,n){},"820e":function(e,t,n){},"83d7":function(e,t,n){},"909e":function(e,t,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(e,t,n){},9768:function(e,t,n){},9800:function(e,t,n){},"9b01":function(e,t,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(e,t,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(e,t,n){},acce:function(e,t,n){},c31f:function(e,t,n){"use strict";n.r(t);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:e.user,"hide-menu":e.hideMenu,"hide-menu-avatar":e.hideMenuAvatar},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,"message-click":e.handleMessageClick,"menu-avatar-click":e.handleMenuAvatarClick,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[e._v("Lemon")]),e._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(t){return[n("span",[e._v(e._s(t.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return e.changeDrawer(t)}}},[e._v("…")])]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:e.appendMessage}},[e._v("发送消息")]),n("lemon-button",{on:{click:e.updateContact}},[e._v("修改联系人信息")]),n("lemon-button",{on:{click:e.changeMenuVisible}},[e._v("切换导航显示")]),n("lemon-button",{on:{click:e.changeMenuAvatarVisible}},[e._v("切换头像显示")])],1)],1)])},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(s),c=n("bd86");n("6b54");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(n,!0).forEach(function(t){Object(c["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var m,d,f,h,p,g,v,b,x,_,w=function(){return(new Date).getTime()},y=function(){return Math.random().toString(36).substr(-8)},j=function(){return Math.random().toString(36).substr(2)},C=function(){var e=arguLine truncated
+1
View File
@@ -0,0 +1 @@
(function(e){function t(t){for(var i,s,o=t[0],c=t[1],l=t[2],m=0,d=[];m<o.length;m++)s=o[m],a[s]&&d.push(a[s][0]),a[s]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);u&&u(t);while(d.length)d.shift()();return r.push.apply(r,l||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var i={},a={index:0},r=[];function s(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=i,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(n,i,function(t){return e[t]}.bind(null,i));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=t,o=o.slice();for(var l=0;l<o.length;l++)t(o[l]);var u=c;r.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("c31f")},"04f4":function(e,t,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(e,t,n){},"0e15":function(e,t,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(e,t,n){},"107a":function(e,t,n){},"15cf":function(e,t,n){},1663:function(e,t,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(e,t,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(e,t,n){},"2ec9":function(e,t){},3423:function(e,t,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(e,t,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(e,t,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(e,t,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(e,t,n){},"6da9":function(e,t,n){},7802:function(e,t,n){},"820e":function(e,t,n){},"83d7":function(e,t,n){},"909e":function(e,t,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(e,t,n){},9768:function(e,t,n){},9800:function(e,t,n){},"9b01":function(e,t,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(e,t,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(e,t,n){},acce:function(e,t,n){},c31f:function(e,t,n){"use strict";n.r(t);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:e.user,"hide-menu":e.hideMenu,"hide-menu-avatar":e.hideMenuAvatar},on:{"change-menu":e.handleChangeMenu,"change-contact":e.handleChangeContact,"pull-messages":e.handlePullMessages,"message-click":e.handleMessageClick,"menu-avatar-click":e.handleMenuAvatarClick,send:e.handleSend},scopedSlots:e._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[e._v("Lemon")]),e._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(t){return[n("span",[e._v(e._s(t.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return e.changeDrawer(t)}}},[e._v("…")])]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[e._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:e.appendMessage}},[e._v("发送消息")]),n("lemon-button",{on:{click:e.updateContact}},[e._v("修改联系人信息")]),n("lemon-button",{on:{click:e.changeMenuVisible}},[e._v("切换导航显示")]),n("lemon-button",{on:{click:e.changeMenuAvatarVisible}},[e._v("切换头像显示")])],1)],1)])},r=[],s=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(s),c=n("bd86");n("6b54");function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(n,!0).forEach(function(t){Object(c["a"])(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(n).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var m,d,f,h,p,g,v,b,x,_,w=function(){return(new Date).getTime()},y=function(){return Math.random().toString(36).substr(-8)},j=function(){return Math.random().toString(36).substr(2)},C=function(){var e=arguLine truncated
-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: "微笑"
// }
// ]
// }
// ];
}
}
};
-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 的代理方法