|
|
@ -1,9 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="chat-input-area"> |
|
|
<div class="chat-input-area"> |
|
|
<div :class="['edit-chat-container', isEmpty ? '' : 'not-empty']" contenteditable="true" |
|
|
<div :class="['edit-container', isEmpty ? '' : 'not-empty']" contenteditable="true" @paste.prevent="onPaste" |
|
|
@paste.prevent="onPaste" @keydown="onKeydown" @compositionstart="compositionFlag = true" |
|
|
@keydown="onKeydown" @compositionstart="compositionFlag = true" @compositionend="onCompositionEnd" |
|
|
@compositionend="onCompositionEnd" @input="onEditorInput" @mousedown="onMousedown" ref="content" |
|
|
@input="onEditorInput" @mousedown="onMousedown" ref="content" @keyup="onKeyup" @click="onClickInput"> |
|
|
@blur="onBlur"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<chat-at-box @select="onAtSelect" :search-text="atSearchText" ref="atBox" :ownerId="ownerId" |
|
|
<chat-at-box @select="onAtSelect" :search-text="atSearchText" ref="atBox" :ownerId="ownerId" |
|
|
:members="groupMembers"></chat-at-box> |
|
|
:members="groupMembers"></chat-at-box> |
|
|
@ -232,12 +232,12 @@ export default { |
|
|
this.showAtBox(e) |
|
|
this.showAtBox(e) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onBlur(e) { |
|
|
onClickInput() { |
|
|
if (!this.atIng) { |
|
|
this.updateRange(); |
|
|
//this.updateRange(); |
|
|
}, |
|
|
} |
|
|
onKeyup() { |
|
|
|
|
|
this.updateRange(); |
|
|
}, |
|
|
}, |
|
|
onMousedown() { |
|
|
onMousedown() { |
|
|
if (this.atIng) { |
|
|
if (this.atIng) { |
|
|
@ -462,7 +462,7 @@ export default { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
.edit-chat-container { |
|
|
.edit-container { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
@ -536,14 +536,14 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.edit-chat-container>div:nth-of-type(1):after { |
|
|
.edit-container>div:nth-of-type(1):after { |
|
|
content: '请输入消息(按Ctrl+Enter键换行)'; |
|
|
content: '请输入消息(按Ctrl+Enter键换行)'; |
|
|
color: gray; |
|
|
color: gray; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.edit-chat-container.not-empty>div:nth-of-type(1):after { |
|
|
.edit-container.not-empty>div:nth-of-type(1):after { |
|
|
content: none; |
|
|
content: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|