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
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)