mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-06-20 15:22:00 +08:00
41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
|
<!-- emoji 表情选择组件 -->
|
||
|
|
<template>
|
||
|
|
<el-popover :width="500" placement="top" trigger="click">
|
||
|
|
<template #reference>
|
||
|
|
<Icon :size="30" class="ml-10px" icon="twemoji:grinning-face" />
|
||
|
|
</template>
|
||
|
|
<ElScrollbar height="300px">
|
||
|
|
<ul class="ml-2 flex flex-wrap px-2">
|
||
|
|
<li
|
||
|
|
v-for="(item, index) in emojiList"
|
||
|
|
:key="index"
|
||
|
|
:style="{
|
||
|
|
borderColor: 'var(--el-color-primary)',
|
||
|
|
color: 'var(--el-color-primary)'
|
||
|
|
}"
|
||
|
|
:title="item.name"
|
||
|
|
class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
|
||
|
|
@click="handleSelect(item)"
|
||
|
|
>
|
||
|
|
<img :src="item.url" style="width: 24px; height: 24px" />
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</ElScrollbar>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
defineOptions({ name: 'EmojiSelectPopover' })
|
||
|
|
import { Emoji, getEmojiList } from './emoji'
|
||
|
|
|
||
|
|
const emojiList = computed(() => getEmojiList())
|
||
|
|
|
||
|
|
const emits = defineEmits<{
|
||
|
|
(e: 'select-emoji', v: Emoji)
|
||
|
|
}>()
|
||
|
|
const handleSelect = (item: Emoji) => {
|
||
|
|
// 整个 emoji 数据传递出去，方便以后输入框直接显示表情
|
||
|
|
emits('select-emoji', item)
|
||
|
|
}
|
||
|
|
</script>
|