feat：输入框的调整
This commit is contained in:
parent
a4d0286f1e
commit
6e365fd187
@ -1,62 +1,65 @@
|
||||
<template>
|
||||
<view class="input-area-wrapper">
|
||||
<view v-if="!visibleWaveBtn" class="area-input">
|
||||
<!-- 语音/键盘切换 -->
|
||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||
<image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image>
|
||||
<image v-else src="/static/input_keyboard_icon.png"></image>
|
||||
</view>
|
||||
<view class="input-area-wrapper">
|
||||
<view v-if="!visibleWaveBtn" class="area-input">
|
||||
<!-- 语音/键盘切换 -->
|
||||
<view class="input-container-voice" @click="toggleVoiceMode">
|
||||
<image
|
||||
v-if="!isVoiceMode"
|
||||
src="/static/input_voice_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_keyboard_icon.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 输入框/语音按钮容器 -->
|
||||
<view class="input-button-container">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-if="!isVoiceMode"
|
||||
:class="['textarea', ios ? 'ios' : 'android']"
|
||||
type="text"
|
||||
cursor-spacing="65"
|
||||
confirm-type="send"
|
||||
v-model="inputMessage"
|
||||
auto-height
|
||||
:confirm-hold="true"
|
||||
:placeholder="placeholder"
|
||||
:show-confirm-bar="false"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:adjust-position="true"
|
||||
:disable-default-padding="true"
|
||||
maxlength="300"
|
||||
@confirm="sendMessage"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
/>
|
||||
<!-- 输入框/语音按钮容器 -->
|
||||
<view class="input-button-container">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-if="!isVoiceMode"
|
||||
:class="['textarea', ios ? 'ios' : 'android']"
|
||||
type="text"
|
||||
cursor-spacing="65"
|
||||
confirm-type="send"
|
||||
v-model="inputMessage"
|
||||
auto-height
|
||||
:confirm-hold="true"
|
||||
:placeholder="placeholder"
|
||||
:show-confirm-bar="false"
|
||||
:hold-keyboard="holdKeyboard"
|
||||
:adjust-position="true"
|
||||
:disable-default-padding="true"
|
||||
maxlength="300"
|
||||
@confirm="sendMessage"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
/>
|
||||
|
||||
<view
|
||||
v-if="isVoiceMode"
|
||||
class="hold-to-talk-button"
|
||||
@longpress="handleVoiceTouchStart"
|
||||
@touchend="handleVoiceTouchEnd"
|
||||
@touchcancel="handleVoiceTouchEnd"
|
||||
>
|
||||
按住 说话
|
||||
<view
|
||||
v-if="isVoiceMode"
|
||||
class="hold-to-talk-button"
|
||||
@longpress="handleVoiceTouchStart"
|
||||
@touchend="handleVoiceTouchEnd"
|
||||
@touchcancel="handleVoiceTouchEnd"
|
||||
>
|
||||
按住 说话
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-container-send">
|
||||
<view class="input-container-send-btn" @click="sendMessage">
|
||||
<image
|
||||
v-if="props.isSessionActive"
|
||||
src="/static/input_stop_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_send_icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-container-send">
|
||||
<view class="input-container-send-btn" @click="sendMessage">
|
||||
<image
|
||||
v-if="props.isSessionActive"
|
||||
src="/static/input_stop_icon.png"
|
||||
></image>
|
||||
<image v-else src="/static/input_send_icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 录音按钮 -->
|
||||
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
|
||||
</view>
|
||||
|
||||
<!-- 录音按钮 -->
|
||||
<RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -67,18 +70,18 @@ const plugin = requirePlugin("WechatSI");
|
||||
const manager = plugin.getRecordRecognitionManager();
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
holdKeyboard: Boolean,
|
||||
isSessionActive: Boolean,
|
||||
stopRequest: Function,
|
||||
modelValue: String,
|
||||
holdKeyboard: Boolean,
|
||||
isSessionActive: Boolean,
|
||||
stopRequest: Function,
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"update:modelValue",
|
||||
"send",
|
||||
"noHideKeyboard",
|
||||
"keyboardShow",
|
||||
"keyboardHide",
|
||||
"sendVoice",
|
||||
"update:modelValue",
|
||||
"send",
|
||||
"noHideKeyboard",
|
||||
"keyboardShow",
|
||||
"keyboardHide",
|
||||
"sendVoice",
|
||||
]);
|
||||
|
||||
const textareaRef = ref(null);
|
||||
@ -92,142 +95,142 @@ const visibleWaveBtn = ref(false);
|
||||
|
||||
// 判断当前平台是否为iOS
|
||||
const ios = computed(() => {
|
||||
return uni.getSystemInfoSync().platform === "ios";
|
||||
return uni.getSystemInfoSync().platform === "ios";
|
||||
});
|
||||
|
||||
// 保持和父组件同步
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
inputMessage.value = val;
|
||||
}
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
inputMessage.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
// 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
|
||||
watch(inputMessage, (val) => {
|
||||
// 只有当值真正不同时才emit，避免循环更新
|
||||
if (val !== props.modelValue) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
// 只有当值真正不同时才emit，避免循环更新
|
||||
if (val !== props.modelValue) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
});
|
||||
|
||||
// 切换语音/文本模式
|
||||
const toggleVoiceMode = () => {
|
||||
isVoiceMode.value = !isVoiceMode.value;
|
||||
isVoiceMode.value = !isVoiceMode.value;
|
||||
};
|
||||
|
||||
// 处理语音按钮长按开始
|
||||
const handleVoiceTouchStart = () => {
|
||||
manager.start({ lang: "zh_CN" });
|
||||
manager.start({ lang: "zh_CN" });
|
||||
|
||||
visibleWaveBtn.value = true;
|
||||
visibleWaveBtn.value = true;
|
||||
|
||||
// 启动音频条动画
|
||||
nextTick(() => {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.startAnimation();
|
||||
}
|
||||
});
|
||||
// 启动音频条动画
|
||||
nextTick(() => {
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.startAnimation();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理语音按钮长按结束
|
||||
const handleVoiceTouchEnd = () => {
|
||||
manager.stop();
|
||||
manager.stop();
|
||||
|
||||
// 停止音频条动画
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
// 停止音频条动画
|
||||
if (recordingWaveBtnRef.value) {
|
||||
recordingWaveBtnRef.value.stopAnimation();
|
||||
}
|
||||
|
||||
visibleWaveBtn.value = false;
|
||||
visibleWaveBtn.value = false;
|
||||
};
|
||||
|
||||
// 处理发送原语音
|
||||
const initRecord = () => {
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result;
|
||||
inputMessage.value = text;
|
||||
};
|
||||
// 识别结束事件
|
||||
manager.onStop = (res) => {
|
||||
console.log(res, 37);
|
||||
let text = res.result;
|
||||
manager.onRecognize = (res) => {
|
||||
let text = res.result;
|
||||
inputMessage.value = text;
|
||||
};
|
||||
// 识别结束事件
|
||||
manager.onStop = (res) => {
|
||||
console.log(res, 37);
|
||||
let text = res.result;
|
||||
|
||||
if (text == "") {
|
||||
console.log("没有说话");
|
||||
return;
|
||||
}
|
||||
if (text == "") {
|
||||
console.log("没有说话");
|
||||
return;
|
||||
}
|
||||
|
||||
inputMessage.value = text;
|
||||
// 在语音识别完成后发送消息
|
||||
emit("send", text);
|
||||
};
|
||||
inputMessage.value = text;
|
||||
// 在语音识别完成后发送消息
|
||||
emit("send", text);
|
||||
};
|
||||
};
|
||||
|
||||
// 监听键盘高度变化
|
||||
onMounted(() => {
|
||||
// 监听键盘弹起
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
keyboardHeight.value = res.height;
|
||||
if (res.height) {
|
||||
emit("keyboardShow", res.height);
|
||||
} else {
|
||||
emit("keyboardHide");
|
||||
}
|
||||
});
|
||||
// 监听键盘弹起
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
keyboardHeight.value = res.height;
|
||||
if (res.height) {
|
||||
emit("keyboardShow", res.height);
|
||||
} else {
|
||||
emit("keyboardHide");
|
||||
}
|
||||
});
|
||||
|
||||
initRecord();
|
||||
initRecord();
|
||||
});
|
||||
|
||||
const sendMessage = () => {
|
||||
if (props.isSessionActive) {
|
||||
// 如果会话进行中，调用停止请求函数
|
||||
if (props.stopRequest) {
|
||||
props.stopRequest();
|
||||
}
|
||||
} else {
|
||||
// 否则发送新消息
|
||||
if (!inputMessage.value.trim()) return;
|
||||
emit("send", inputMessage.value);
|
||||
if (props.isSessionActive) {
|
||||
// 如果会话进行中，调用停止请求函数
|
||||
if (props.stopRequest) {
|
||||
props.stopRequest();
|
||||
}
|
||||
} else {
|
||||
// 否则发送新消息
|
||||
if (!inputMessage.value.trim()) return;
|
||||
emit("send", inputMessage.value);
|
||||
|
||||
// 发送后保持焦点（可选）
|
||||
if (props.holdKeyboard && textareaRef.value) {
|
||||
nextTick(() => {
|
||||
textareaRef.value.focus();
|
||||
});
|
||||
// 发送后保持焦点（可选）
|
||||
if (props.holdKeyboard && textareaRef.value) {
|
||||
nextTick(() => {
|
||||
textareaRef.value.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
isFocused.value = true;
|
||||
emit("noHideKeyboard");
|
||||
isFocused.value = true;
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
isFocused.value = false;
|
||||
isFocused.value = false;
|
||||
};
|
||||
|
||||
const handleTouchStart = () => {
|
||||
emit("noHideKeyboard");
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
emit("noHideKeyboard");
|
||||
emit("noHideKeyboard");
|
||||
};
|
||||
|
||||
// 手动聚焦输入框
|
||||
const focusInput = () => {
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.focus();
|
||||
}
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.focus();
|
||||
}
|
||||
};
|
||||
|
||||
// 手动失焦输入框
|
||||
const blurInput = () => {
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.blur();
|
||||
}
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.blur();
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
@ -236,92 +239,87 @@ defineExpose({ focusInput });
|
||||
|
||||
<style scoped lang="scss">
|
||||
.area-input {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
border-radius: 22px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||
margin: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.input-container-voice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-button-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hold-to-talk-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 22px;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||
margin: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.input-container-send {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
.input-container-voice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
.input-container-send-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 92px;
|
||||
min-height: 44px;
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
|
||||
&.android {
|
||||
padding: 12px 0;
|
||||
.input-button-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.ios {
|
||||
padding: 6px 0;
|
||||
.hold-to-talk-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #cccccc;
|
||||
line-height: normal;
|
||||
.input-container-send {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
.input-container-send-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
.textarea {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 92px;
|
||||
min-height: 22px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
margin: 6px 0;
|
||||
|
||||
&::placeholder {
|
||||
color: #cccccc;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user