【需求 21133】 ux: 加入表情包hover放大效果

src/components/common/UploadEmojiIcon/index.vue

@@ -73,9 +73,23 @@ const switchTab = (nextTab: EmojiTab) => {
         <el-scrollbar class="emoji-scrollbar">
           <transition :name="transitionName" mode="out-in">
             <div :key="activeTab" class="emoji-grid">
+              <div v-for="item in currentEmojiList" :key="item.name">
+                <el-popover
+                  v-if="item.group === 'yaya'"
+                  placement="top"
+                  trigger="hover"
+                  :offset="10"
+                  :show-arrow="false"
+                  :popper-style="{
+                    height: '150px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }"
+                >
+                  <el-image :src="item.url" :alt="item.name" class="h-full w-full object-contain" />
+                  <template #reference>
                     <button
-                v-for="item in currentEmojiList"
-                :key="item.name"
                       type="button"
                       class="emoji-item"
                       :title="item.name"
@@ -88,6 +102,24 @@ const switchTab = (nextTab: EmojiTab) => {
                         :class="{ 'h-8 w-8': item.group === 'yaya' }"
                       />
                     </button>
+                  </template>
+                </el-popover>
+
+                <button
+                  v-else
+                  type="button"
+                  class="emoji-item"
+                  :title="item.name"
+                  @click="emit('selectEmoji', item as IEmoji)"
+                >
+                  <img
+                    :src="item.url"
+                    :alt="item.name"
+                    class="h-6 w-6 object-contain"
+                    :class="{ 'h-8 w-8': item.group === 'yaya' }"
+                  />
+                </button>
+              </div>
             </div>
           </transition>
         </el-scrollbar>