feat:修复键盘的问题

This commit is contained in:
2025-08-05 20:01:30 +08:00
parent 9ca2d72256
commit e539c7d35d
4 changed files with 133 additions and 21 deletions

View File

@@ -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()
}