Skip to content

C
corporate-culture-qd
Commit bd1edfc9 by lijiabin
Options

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

parent 5e9fb2ee
Showing with 47 additions and 15 deletions
src/components/common/UploadEmojiIcon/index.vue
...@@ -73,21 +73,53 @@ const switchTab = (nextTab: EmojiTab) => { ...@@ -73,21 +73,53 @@ const switchTab = (nextTab: EmojiTab) => {
<el-scrollbar class="emoji-scrollbar"> <el-scrollbar class="emoji-scrollbar">
<transition :name="transitionName" mode="out-in"> <transition :name="transitionName" mode="out-in">
<div :key="activeTab" class="emoji-grid"> <div :key="activeTab" class="emoji-grid">
<button <div v-for="item in currentEmojiList" :key="item.name">
v-for="item in currentEmojiList" <el-popover
:key="item.name" v-if="item.group === 'yaya'"
type="button" placement="top"
class="emoji-item" trigger="hover"
:title="item.name" :offset="10"
@click="emit('selectEmoji', item as IEmoji)" :show-arrow="false"
> :popper-style="{
<img height: '150px',
:src="item.url" display: 'flex',
:alt="item.name" alignItems: 'center',
class="h-6 w-6 object-contain" justifyContent: 'center',
:class="{ 'h-8 w-8': item.group === 'yaya' }" }"
/> >
</button> <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> </div>
</transition> </transition>
</el-scrollbar> </el-scrollbar>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment