fix(DetailsComments): 修复表情选择框样式及优化表情数据
- 使用el-popover重构表情选择框，解决样式问题 - 调整表情选择框的宽度和位置 - 更新表情数据，移除部分不常用表情 - 优化表情选择框的交互体验 - 修复CSS样式冲突问题
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -17,11 +17,16 @@
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ pitch: editEmojiState }">
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" @click="openEditEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
<div class="item" :class="{ pitch: editEmojiState }" style="z-index: 2;">
|
||||
<el-popover placement="left-start" popper-class="emoji-popover" :width="584" trigger="click" v-model:visible="editEmojiState" :teleported="false">
|
||||
<template #reference>
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" alt="" />
|
||||
</template>
|
||||
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEditEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -65,10 +70,15 @@
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ pitch: emojiState }">
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji()" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
<el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="emojiState" :teleported="false">
|
||||
<template #reference>
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" alt="" />
|
||||
</template>
|
||||
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -147,10 +157,15 @@
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ pitch: item.emojiState }">
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji(index)" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
|
||||
</div>
|
||||
<el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="item.emojiState" :teleported="false">
|
||||
<template #reference>
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" alt="" />
|
||||
</template>
|
||||
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -235,10 +250,15 @@
|
||||
<div class="bottom flexacenter">
|
||||
<div class="operate flexacenter">
|
||||
<div class="item" :class="{ pitch: ite.emojiState }">
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji(index, i)" alt="" />
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
|
||||
</div>
|
||||
<el-popover placement="left" popper-class="emoji-popover" :width="625" trigger="click" v-model:visible="ite.emojiState" :teleported="false">
|
||||
<template #reference>
|
||||
<img class="icon" src="@/assets/img/smiling-face.png" alt="" />
|
||||
</template>
|
||||
|
||||
<div class="emoji-box">
|
||||
<div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item flexacenter">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -429,8 +449,6 @@ const commentLike = (index, i) => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 打开 回答-评论 的子评论
|
||||
const openAnswerCommentsChild = (index, i) => {
|
||||
if (realname.value == 0 && userInfoWin.value.uin > 0) {
|
||||
@@ -470,8 +488,8 @@ const realname = inject("realname");
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (content, index, i) => {
|
||||
console.log("submitAnswerComments",submitAnswerComments);
|
||||
|
||||
console.log("submitAnswerComments", submitAnswerComments);
|
||||
|
||||
if (realname.value == 0 && userInfoWin.value.uin > 0) {
|
||||
openAttest();
|
||||
return;
|
||||
@@ -727,7 +745,8 @@ let picture = ref({});
|
||||
let emojiState = ref(false);
|
||||
let emojiMaskState = ref(false);
|
||||
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
|
||||
// , "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"];
|
||||
|
||||
// 打开 Emoji
|
||||
const openEmoji = (index, i) => {
|
||||
@@ -1039,6 +1058,27 @@ const postEditComment = () => {
|
||||
|
||||
const closeEditFileUpload = () => (editPicture.value = {});
|
||||
|
||||
// 同时监听多个值
|
||||
// watch(
|
||||
// // 监听的目标：变量和数组（使用计算属性返回需要判断的结果）
|
||||
// () => {
|
||||
// // 收集数组中所有父对象的emojiState
|
||||
// const parentStates = commentList.value.map((item) => item.emojiState);
|
||||
// const childStates = commentList.value.flatMap((item) => item.child.map((child) => child.emojiState));
|
||||
// return [editEmojiState.value, emojiState.value, ...parentStates, ...childStates];
|
||||
// },
|
||||
// // 回调函数：当监听的目标变化时执行
|
||||
// (allStates) => {
|
||||
// console.log("allStates", allStates);
|
||||
// // 使用some()判断是否有至少一个true
|
||||
// const hasTrue = allStates.some((state) => state === true);
|
||||
// console.log("hasTrue", hasTrue);
|
||||
// emit("hasTrue", hasTrue); // 实时传递当前状态（true/false）
|
||||
// },
|
||||
// // 配置项：立即执行一次（可选）
|
||||
// { immediate: true }
|
||||
// );
|
||||
|
||||
defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, bottomNavigationBar, closeAnswerCommentsChild });
|
||||
</script>
|
||||
|
||||
@@ -1095,4 +1135,23 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-popover {
|
||||
box-sizing: border-box;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
padding: 0px !important;
|
||||
border-radius: 10px !important;
|
||||
border: 1px solid #ebebeb !important;
|
||||
|
||||
.el-popper__arrow {
|
||||
z-index: 1;
|
||||
&:before {
|
||||
background-color: #fff;
|
||||
border-top-color: #fff !important;
|
||||
border-left-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user