A1300399510/PC-vote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(DetailsComments): 修复表情选择时光标位置不正确的问题

Browse Source 
优化表情选择功能，确保插入表情时保持正确的光标位置。同时更新了相关构建文件和依赖项。
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-05 19:08:21 +08:00
parent f1b37cf1a0
commit 1e8d6cf494
49 changed files with 427 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/DetailsComments.vue
View File

@@ -52,7 +52,7 @@
<div class="input-box">
<div class="top flexflex">
<img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
<textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
<textarea ref="inputTextareaRef" class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @focus="judgeLogin" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
</div>
<div class="picture-box flexacenter" v-if="picture.length != 0" style="width: 470px">
<div class="picture" v-for="(item, index) in picture" :key="index">
@@ -138,7 +138,7 @@
<div class="input-box" v-if="item['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex">
<textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
<textarea class="input-textarea flex1" :class="[`input-textarea-${item.id}`]" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
</div>
<div class="picture-box flexacenter" v-if="item?.picture?.length != 0" style="width: 440px">
<div class="picture" v-for="it in item.picture" :key="it.url">
@@ -224,7 +224,7 @@
<div class="input-box" v-if="ite['childState']">
<img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
<div class="top flexflex">
<textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || ite.user['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
<textarea class="input-textarea flex1" :class="[`input-textarea-${item.id}`]" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || ite.user['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
</div>
<div class="picture-box flexacenter" v-if="ite.picture?.length != 0" style="width: 408px">
@@ -786,20 +786,81 @@ const closeEmoji = (index, i) => {
editEmojiState.value = false;
};
const inputTextareaRef = ref(null);
// 选择 Emoji
const selectEmoji = (key, index, i) => {
closeEmoji();
if (i != undefined) {
if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = "";
commentList.value[index]["child"][i]["commentInput"] += key;
const id = commentList.value[index]["child"][i]?.id;
const textarea = document.querySelector(`.input-textarea-${id}`);
if (textarea) {
const currentValue = textarea.value;
const startPos = textarea.selectionStart || 0;
const endPos = textarea.selectionEnd || 0;
const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
commentList.value[index]["child"][i]["commentInput"] = newValue;
nextTick(() => {
textarea.focus();
textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
});
} else commentList.value[index]["child"][i]["commentInput"] += key;
} else if (index != undefined) {
if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = "";
commentList.value[index]["commentInput"] += key;
const id = commentList.value[index]?.id;
const textarea = document.querySelector(`.input-textarea-${id}`);
if (textarea) {
const currentValue = textarea.value;
const startPos = textarea.selectionStart || 0;
const endPos = textarea.selectionEnd || 0;
const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
commentList.value[index]["commentInput"] = newValue;
nextTick(() => {
textarea.focus();
textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
});
} else commentList.value[index]["commentInput"] += key;
} else {
commentInputTop.value += key;
const textarea = inputTextareaRef.value;
if (!textarea) return;
const currentValue = textarea.value;
const startPos = textarea.selectionStart || 0;
const endPos = textarea.selectionEnd || 0;
const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
commentInputTop.value = newValue;
nextTick(() => {
textarea.focus();
textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
});
}
};
// const selectEmoji = (key, index, i) => {
// closeEmoji();
// if (i != undefined) {
// if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = "";
// commentList.value[index]["child"][i]["commentInput"] += key;
// } else if (index != undefined) {
// if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = "";
// commentList.value[index]["commentInput"] += key;
// } else {
// commentInputTop.value += key;
// }
// };
// 自动输入框增高
const autoResize = (e) => {
e.target.style.height = "auto"; // 重置高度
@@ -1066,7 +1127,22 @@ const openEditEmoji = (index, i) => {
const selectEditEmoji = (key) => {
closeEmoji();
editInput.value += key;
// editInput.value += key;
const textarea = editInputRef.value;
if (!textarea) return;
const currentValue = textarea.value;
const startPos = textarea.selectionStart || 0;
const endPos = textarea.selectionEnd || 0;
const newValue = currentValue.substring(0, startPos) + key + currentValue.substring(endPos);
editInput.value = newValue;
nextTick(() => {
textarea.focus();
textarea.selectionStart = textarea.selectionEnd = startPos + key.length;
});
};
const postEditComment = () => {