85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<template>
|
|
<el-popover
|
|
:placement="placement"
|
|
:width="width"
|
|
trigger="click"
|
|
popper-class="emoji-popover"
|
|
ref="emojiPopoverRef"
|
|
>
|
|
<template #reference>
|
|
<slot>
|
|
<el-button link title="emoji" class="default-emoji-trigger">😊</el-button>
|
|
</slot>
|
|
</template>
|
|
<el-scrollbar height="240px">
|
|
<div class="emoji-container">
|
|
<span
|
|
v-for="emoji in emotionList"
|
|
:key="emoji"
|
|
class="emoji-item"
|
|
@click="selectEmoji(emoji)"
|
|
>
|
|
{{ emoji }}
|
|
</span>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useEmoji } from "./useEmoji";
|
|
const { emotionList } = useEmoji();
|
|
const props = defineProps({
|
|
placement: { type: String, default: "bottom-start" },
|
|
width: { type: [Number, String], default: "auto" },
|
|
});
|
|
|
|
defineOptions({ name: "EmojiPicker" });
|
|
|
|
const emojiPopoverRef = ref(null);
|
|
const emit = defineEmits(["select"]);
|
|
|
|
// 筛选表情后的事件
|
|
const selectEmoji = (emoji) => {
|
|
emit("select", emoji);
|
|
nextTick(() => {
|
|
if (emojiPopoverRef.value) {
|
|
emojiPopoverRef.value.hide();
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.emoji-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 4px;
|
|
padding: 5px;
|
|
|
|
.emoji-item {
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
transition: background-color 0.2s ease;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
background-color: #f0f2f5;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
:deep(.el-scrollbar__bar.is-horizontal) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.default-emoji-trigger {
|
|
font-size: 20px;
|
|
padding: 4px;
|
|
}
|
|
</style>
|