feat:修复键盘的问题
This commit is contained in:
@@ -61,10 +61,13 @@
|
||||
<view class="footer-area">
|
||||
<ChatQuickAccess @replySent="handleReplyInstruct"/>
|
||||
<ChatInputArea
|
||||
ref="inputAreaRef"
|
||||
v-model="inputMessage"
|
||||
:holdKeyboard="holdKeyboard"
|
||||
@send="sendMessageAction"
|
||||
@noHideKeyboard="handleNoHideKeyboard"
|
||||
@keyboardShow="handleKeyboardShow"
|
||||
@keyboardHide="handleKeyboardHide"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@@ -72,7 +75,7 @@
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { onMounted, nextTick } from 'vue'
|
||||
import { onMounted, nextTick, computed } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { defineEmits } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
@@ -106,12 +109,18 @@
|
||||
|
||||
/// 导航栏相关
|
||||
const statusBarHeight = ref(20);
|
||||
/// 输入框组件引用
|
||||
const inputAreaRef = ref(null);
|
||||
|
||||
const timer = ref(null)
|
||||
/// focus时,点击页面的时候不收起键盘
|
||||
const holdKeyboard = ref(false)
|
||||
/// 是否在键盘弹出,点击界面时关闭键盘
|
||||
const holdKeyboardFlag = ref(true)
|
||||
/// 键盘高度
|
||||
const keyboardHeight = ref(0)
|
||||
/// 是否显示键盘
|
||||
const isKeyboardShow = ref(false)
|
||||
|
||||
///(控制滚动位置)
|
||||
const scrollTop = ref(99999);
|
||||
@@ -135,6 +144,8 @@
|
||||
/// 指令
|
||||
let commonType = ''
|
||||
|
||||
|
||||
|
||||
|
||||
// 打开抽屉
|
||||
const emits = defineEmits(['openDrawer'])
|
||||
@@ -144,23 +155,37 @@
|
||||
}
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
clearTimeout(timer.value)
|
||||
timer.value = setTimeout(() => {
|
||||
// 键盘弹出时点击界面则关闭键盘
|
||||
if (handleNoHideKeyboard) {
|
||||
if (holdKeyboardFlag.value && isKeyboardShow.value) {
|
||||
uni.hideKeyboard()
|
||||
}
|
||||
holdKeyboardFlag.value = true
|
||||
}, 50)
|
||||
// #endif
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 点击输入框、发送按钮时,不收键盘
|
||||
const handleNoHideKeyboard = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
holdKeyboardFlag.value = false
|
||||
// #endif
|
||||
}
|
||||
|
||||
// 键盘弹起事件
|
||||
const handleKeyboardShow = (height) => {
|
||||
keyboardHeight.value = height
|
||||
isKeyboardShow.value = true
|
||||
holdKeyboard.value = true
|
||||
// 键盘弹起时调整聊天内容的底部边距并滚动到底部
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 150)
|
||||
}
|
||||
|
||||
// 键盘收起事件
|
||||
const handleKeyboardHide = () => {
|
||||
keyboardHeight.value = 0
|
||||
isKeyboardShow.value = false
|
||||
holdKeyboard.value = false
|
||||
}
|
||||
|
||||
/// 滚动到底部
|
||||
@@ -207,6 +232,12 @@
|
||||
if(!isSessionActive) {
|
||||
inputMessage.value = ''
|
||||
}
|
||||
// 发送消息后保持键盘状态
|
||||
if (holdKeyboard.value && inputAreaRef.value) {
|
||||
setTimeout(() => {
|
||||
inputAreaRef.value.focusInput()
|
||||
}, 100)
|
||||
}
|
||||
setTimeoutScrollToBottom()
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user