Browse Source

fix: 表情位置异常的bug

master
xsx 3 months ago
parent
commit
ab190f82db
  1. 26
      im-web/src/components/chat/ChatInput.vue

26
im-web/src/components/chat/ChatInput.vue

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

Loading…
Cancel
Save