fix(emoji-box): 修复表情框样式问题并优化代码结构
重构表情框样式，移除冗余代码，调整布局和交互效果 更新构建文件和资源映射，确保样式正确加载
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -237,12 +237,17 @@
|
||||
|
||||
<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 v-if="editEmojiState" class="emoji-edit-box-mask" @click="closeEditEmoji()"></div>
|
||||
<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 v-if="editEmojiState" class="emoji-edit-box-mask" @click="closeEditEmoji()"></div> -->
|
||||
<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="handleEditFile()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -282,11 +287,16 @@
|
||||
|
||||
<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>
|
||||
<div class="item" :class="{ pitch: emojiState }" style="z-index: 2">
|
||||
<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" />
|
||||
@@ -366,11 +376,16 @@
|
||||
</div>
|
||||
<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>
|
||||
<div class="item" :class="{ pitch: item.emojiState }" style="z-index: 2">
|
||||
<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" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -472,11 +487,16 @@
|
||||
</div>
|
||||
<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>
|
||||
<div class="item" :class="{ pitch: ite.emojiState }" style="z-index: 2">
|
||||
<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" @click="judgeLogin()">
|
||||
<input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
|
||||
@@ -1933,7 +1953,8 @@ let picture = ref({});
|
||||
let emojiState = ref(false);
|
||||
let emojiMaskState = ref(false);
|
||||
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
|
||||
// const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"];
|
||||
const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😘", "🤥", "😪", "😵💫", "🤓", "🥺", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❎️", "✳️", "✴️", "❇️", "#️⃣", "*️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🆗", "🈶", "🉐", "🉑", "🌹", "🥀", "🌸", "🌺", "🌷", "🌲", "☘️", "🍀", "🍁", "🌙", "⭐", "🌍", "☀️", "⭐️", "🌟", "☁️", "🌈", "☂️", "❄️", "☃️", "☄️", "🔥", "💧", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹", "🍒", "🥝", "🥒", "🥦", "🥨", "🌭", "🥘", "🍱", "🍢", "🥮", "🍩", "🍪", "🧁", "🍵", "🍶", "🍻", "🥂", "🧋", "🎉", "🎁", "🧧", "🎃", "🎄", "🧨", "✨️", "🎈", "🎊", "🎋", "🎍", "🎀", "🎖️", "🏆️", "🏅", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🔮", "🧸", "🀄️"];
|
||||
|
||||
// 打开 Emoji
|
||||
const openEmoji = (index, i) => {
|
||||
@@ -2270,4 +2291,22 @@ const closeEditFileUpload = () => (editPicture.value = {});
|
||||
|
||||
<style lang="less">
|
||||
@import url(@/assets/css/detailsPop.css);
|
||||
.el-popper.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