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

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

Browse Source
This commit is contained in:
fan committed 2021-01-17 00:26:29 +08:00
1 parent a450101dbe
commit d81c431315
12 files changed
+721 -340
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+5 -6
View File
@@ -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).
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>
<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">
<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
examples/dist/css/index.08b1f4f3.css
Vendored
-1
View File
@@ -1 +0,0 @@
body{background:#3d495c!important}.link{padding:15px 0}.link a{display:inline-block;font-size:16px;color:#ccd3dc;text-decoration:none;border-radius:5px;margin-right:15px}.link a:hover{color:#85acda}.action{margin-top:30px}.action button{margin-right:10px}.imui-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.drawer-content{padding:15px}.more{font-size:32px;line-height:18px;height:32px;position:absolute;top:6px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.more:active{color:#000}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%;display:inline-block;padding:0 4px;height:18px;line-height:17px;min-width:10px;top:-4px;right:6px}.lemon-badge__label--dot{width:10px;height:10px;min-width:auto;padding:0;top:-3px;right:2px}.lemon-avatar{font-variant:tabular-nums;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:inline-block;text-align:center;background:#ccc;color:hsla(0,0%,100%,.7);white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;border-radius:4px}.lemon-avatar img{width:100%;height:100%;display:block}.lemon-contact{padding:10px 14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;background:#efefef}.lemon-contact p{margin:0}.lemon-contact--active{background:#bebdbd}.lemon-contact:hover:not(.lemon-contact--active){background:#e3e3e3}.lemon-contact:hover:not(.lemon-contact--active) .el-badge__content{border-color:#ddd}.lemon-contact__avatar{float:left;margin-right:10px}.lemon-contact__avatar img{display:block}.lemon-contact__avatar .ant-badge-count{display:inlinLine truncated
examples/dist/css/index.cad2726a.css
Vendored
+1
View File
@@ -0,0 +1 @@
::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}body{background:#f6f6f6!important}#app{width:90%;margin:0 auto;padding-bottom:100px}.action{margin-top:20px}.action .lemon-button{margin-right:10px}.link{font-size:14px;margin-top:15px}.link a{margin:0 5px;text-decoration:none;background:#ffba00;border-radius:4px;padding:5px 10px;color:rgba(0,0,0,.8)}.link a,.logo{display:inline-block}.logo{position:relative;margin:60px auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo-text{font-size:38px}.logo-sub{font-size:18px;color:#999;font-weight:300}.logo-badge{position:absolute;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.table{width:100%;border-radius:10px;background:#fff;border-collapse:collapse}.table tr{cursor:pointer}.table tr:not(.table-head):hover{background:#ffba00!important}.table tr:nth-of-type(2n){background:#f9f9f9}.table th{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.table td,.table th{text-align:left;padding:10px 15px;font-size:14px;font-weight:400}.imui-center{margin-bottom:60px}.imui-center .lemon-wrapper,.imui-center .lemon-wrapper--drawer-show .lemon-drawer{-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}.drawer-content{padding:15px}.more{font-size:32px;line-height:18px;height:32px;position:absolute;top:6px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.more:active{color:#000}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;border-radius:4px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);color:rgba(0,0,0,.65);background-color:#fff;-webkit-box-shadow:0 2px 0 rgba(0,0,0,.015);box-shadow:0 2px 0 rgba(0,0,0,.015);text-shadow:0 -1px 0 rgba(0,0,0,.12)}.lemon-button:hover:not([disabled]){border-color:#666;color:#333}.lemon-button:active{background-color:#ddd}.lemon-button[disabled]{cursor:not-allowed;color:#aaa;background:#eee}.lemon-badge{position:relative;display:inline-block}.lemon-badge__label{border-radius:10px;background:#f5222d;color:#fff;text-align:center;font-size:12px;font-weight:400;white-space:nowrap;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;z-index:10;position:absolute;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transformLine truncated
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
@@ -1 +0,0 @@
(function(t){function e(e){for(var i,s,o=e[0],c=e[1],l=e[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)&&(t[i]=c[i]);u&&u(e);while(d.length)d.shift()();return r.push.apply(r,l||[]),n()}function n(){for(var t,e=0;e<r.length;e++){for(var n=r[e],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(r.splice(e--,1),t=s(s.s=n[0]))}return t}var i={},a={index:0},r=[];function s(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=t,s.c=i,s.d=function(t,e,n){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},s.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)s.d(n,i,function(e){return t[e]}.bind(null,i));return n},s.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var l=0;l<o.length;l++)e(o[l]);var u=c;r.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(t,e,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(t,e,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(t,e,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(t,e,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(t,e,n){},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(t,e,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[t._v("Lemon")]),t._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(e){return[n("span",[t._v(t._s(e.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return t.changeDrawer(e)}}},[t._v("…")])]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[t._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[t._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:t.appendMessage}},[t._v("发送消息")]),n("lemon-button",{on:{click:t.updateContact}},[t._v("修改联系人信息")]),n("lemon-button",{on:{click:t.changeMenuVisible}},[t._v("切换导航显示")]),n("lemon-button",{on:{click:t.changeMenuAvatarVisible}},[t._v("切换头像显示")])],1),t._m(0)],1)])},r=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"link"},[n("a",{attrs:{target:"_blank",href:"https://github.com/fanjyy/lemon-imui"}},[t._v("Github")]),n("a",{attrs:{target:"_blank",href:"https://gitee.com/june000/lemon-im"}},[t._v("Gitee")])])}],s=(n("8e6e"),n("ac6a"),n("456d"),n("2638")),o=n.n(s),c=n("bd86");n("6b54");function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,i)}return n}function u(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(n,!0).forEach(function(e){Object(c["a"])(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(n).forEach(function(e){Object.definePLine truncated
examples/dist/js/index.6893d2db.js
Vendored
+1
View File
@@ -0,0 +1 @@
(function(t){function e(e){for(var i,r,o=e[0],c=e[1],l=e[2],u=0,m=[];u<o.length;u++)r=o[u],a[r]&&m.push(a[r][0]),a[r]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=c[i]);d&&d(e);while(m.length)m.shift()();return s.push.apply(s,l||[]),n()}function n(){for(var t,e=0;e<s.length;e++){for(var n=s[e],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(s.splice(e--,1),t=r(r.s=n[0]))}return t}var i={},a={index:0},s=[];function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var l=0;l<o.length;l++)e(o[l]);var d=c;s.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(t,e,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"436f":function(t,e,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"49c2":function(t,e,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(t,e,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(t,e,n){},9224:function(t){t.exports={name:"lemon-imui",version:"1.0.5",main:"dist/index.umd.min.js",description:"基于 VUE2.0 的 IM 聊天组件",homepage:"https://github.com/fanjyy/lemon-imui",repository:{type:"git",url:"git+https://github.com/fanjyy/lemon-imui.git"},scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js",lint:"vue-cli-service lint"},dependencies:{vue:"^2.6.10"},devDependencies:{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2",eslint:"^5.16.0","eslint-plugin-vue":"^5.2.3",stylus:"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},author:"fanjun",license:"MIT"}},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(t,e,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"logo"},[n("div",{staticClass:"logo-text"},[n("b",[t._v("Lemon")]),t._v(" IMUI"),n("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),n("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0)]),n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[t._v("自定义封面 Lemon")]),t._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(e){return[n("span",[t._v(t._s(e.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return t.changeDrawer(e)}}},[t._v("…")])]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[t._v("自定义消息顶部")])]},proxy:!0},{key:"contact-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[t._v("自定义联系人顶部")])]},proxy:!0}])}),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:t.appendMessage}},[t._v("发送消息")]),n("lLine truncated
package.json
+1 -1
View File
@@ -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",
packages/components/contact.vue
+1
View File
@@ -85,6 +85,7 @@ export default {
box-sizing border-box
overflow hidden
background #efefef
text-align left
p
margin 0
+m(active)
packages/components/editor.vue
+110 -34
View File
@@ -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
packages/components/index.vue
+43 -37
View File
@@ -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)