fix(chat): 修复uni-easyinput在手机键盘弹出时,导致页面整体上移的问题
- 新增 OptimizeInput组件以替换 uni-easyinput
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user