fix(chat): 修复uni-easyinput在手机键盘弹出时,导致页面整体上移的问题

- 新增 OptimizeInput组件以替换 uni-easyinput
This commit is contained in:
wslyx
2025-05-24 20:32:22 +08:00
parent 1f169a1ed1
commit 79e9540da5
2 changed files with 546 additions and 81 deletions
+6 -81
View File
@@ -1,17 +1,13 @@
<template>
<view class="send-wrap ss-flex">
<view class="left ss-flex ss-flex-1">
<uni-easyinput
<optimize-input
class="ss-flex-1 ss-p-l-22"
:inputBorder="false"
:clearable="false"
v-model="message"
placeholder="请输入你要咨询的问题"
:maxlength="maxLength"
:focus="autoFocus"
@focus="handleFocus"
></uni-easyinput>
<text v-if="showCharCount" class="char-count">{{ message.length }}/{{ maxLength }}</text>
></optimize-input>
</view>
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
<text
@@ -35,6 +31,7 @@
<script setup>
import { computed, ref, onUnmounted } from 'vue';
import OptimizeInput from '@/pages/chat/components/optimize-input.vue';
/**
* 消息发送组件
*/
@@ -49,83 +46,27 @@
type: String,
default: '',
},
// 是否自动获取焦点
autoFocus: {
type: Boolean,
default: false,
},
// 最大字数限制
maxLength: {
type: Number,
default: 500,
},
// 是否显示字数统计
showCharCount: {
type: Boolean,
default: true,
},
});
const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
const message = computed({
get() {
return props.modelValue;
},
set(newValue) {
emits(`update:modelValue`, newValue);
},
});
// 控制发送状态
const sending = ref(false);
// 是否禁用发送按钮
const isDisabled = computed(() => {
return !message.value.trim() || message.value.length > props.maxLength;
});
// 输入框获取焦点
const handleFocus = () => {
// 输入框获取焦点时关闭工具栏
if (props.toolsMode !== '') {
onTools('');
}
};
});
// 打开工具菜单
function onTools(mode) {
emits('onTools', mode);
}
// 防抖处理
let sendTimer = null;
// 发送消息
function sendMessage() {
// 如果正在发送中,或者内容为空,则不处理
if (sending.value || isDisabled.value) return;
// 清除可能存在的定时器
if (sendTimer) clearTimeout(sendTimer);
// 设置发送状态
sending.value = true;
// 执行发送,并添加防抖
sendTimer = setTimeout(() => {
emits('sendMessage');
// 发送完成后重置状态
setTimeout(() => {
sending.value = false;
}, 300);
}, 300);
emits('sendMessage');
}
// 组件卸载时清除定时器
onUnmounted(() => {
if (sendTimer) clearTimeout(sendTimer);
});
</script>
<style scoped lang="scss">
@@ -137,16 +78,6 @@
height: 64rpx;
border-radius: 32rpx;
background: var(--ui-BG-1);
position: relative;
.char-count {
position: absolute;
right: 15rpx;
top: 50%;
transform: translateY(-50%);
font-size: 22rpx;
color: #999;
}
}
.bq {
@@ -174,12 +105,6 @@
font-size: 26rpx;
color: #fff;
margin-left: 11rpx;
transition: all 0.3s;
&.disabled {
opacity: 0.6;
background: #cccccc;
}
}
}
</style>