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

src/components/common/UploadEmojiIcon/index.vue

@@ -73,21 +73,53 @@ const switchTab = (nextTab: EmojiTab) => {
         <el-scrollbar class="emoji-scrollbar">
           <transition :name="transitionName" mode="out-in">
             <div :key="activeTab" class="emoji-grid">
-              <button
-                v-for="item in currentEmojiList"
-                :key="item.name"
-                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 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
+                      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>
+                  </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>