fix: 焦点会超出输入框的情况

This commit is contained in:
kuaifan 2022-05-29 12:03:31 +08:00
parent 2dc5790a46
commit 178b511a24
2 changed files with 39 additions and 23 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="chat-input-box" :class="boxClass" v-clickoutside="hidePopover">
<div ref="aa" class="chat-input-box" :class="boxClass" v-clickoutside="hidePopover">
<div class="chat-input-wrapper" @click.stop="focus">
<!-- 输入框 -->
<div
@ -167,6 +167,7 @@ export default {
data() {
return {
quill: null,
isFocus: false,
rangeIndex: 0,
_content: '',
_options: {},
@ -348,6 +349,30 @@ export default {
this.$emit('on-more-visible-change', val)
},
isFocus(val) {
if (this.timerScroll) {
clearInterval(this.timerScroll);
}
if (val) {
this.$emit('on-focus')
this.hidePopover()
if (this.isSpecVersion) {
// ios11.0-11.3 scrollTopscrolIntoViewbug
//
} else {
this.timerScroll = setInterval(() => {
if (this.quill.hasFocus()) {
$A.scrollToView(this.$refs.editor, true)
} else {
clearInterval(this.timerScroll);
}
}, 200);
}
} else {
this.$emit('on-blur')
}
},
dialogInputCache() {
this.$emit('input', this.getInputCache())
}
@ -455,27 +480,18 @@ export default {
// Mark model as touched if editor lost focus
this.quill.on('selection-change', range => {
if (this.timerScroll) {
clearInterval(this.timerScroll);
}
if (!range) {
this.$emit('on-blur', this.quill)
} else {
this.$emit('on-focus', this.quill)
this.hidePopover()
if (this.isSpecVersion) {
// ios11.0-11.3 scrollTopscrolIntoViewbug
//
} else {
this.timerScroll = setInterval(() => {
if (this.quill.hasFocus()) {
$A.scrollToView(this.$refs.editor, true)
} else {
clearInterval(this.timerScroll);
}
}, 200);
//
if (this.quill.hasFocus()) {
this.quill.setSelection(0)
return
}
if (document.activeElement && document.activeElement.className === 'ql-clipboard') {
this.quill.setSelection(this.quill.getLength())
return
}
}
this.isFocus = !!range;
})
// Update model if text changes

View File

@ -585,12 +585,12 @@ export default {
this.onActive();
},
onEventFocus(e) {
this.$emit("on-focus", e)
onEventFocus() {
this.$emit("on-focus")
},
onEventBlur(e) {
this.$emit("on-blur", e)
onEventBlur() {
this.$emit("on-blur")
},
onEventMore(e) {