Vue3实现Emoji表情的四种方案

npm install emoji-mart-vue-fast

<template>
<Picker :data="emojiIndex" :emojiSize="18" :showPreview="false" :infiniteScroll="false" :i18n="emojiI18n"
                set="apple" @select="handlerEmoji" />
</template>

<script>
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
export default {
 components: { Picker, EmojiIndex },
    data() {
        return {
            editorValue: "",
            emojiOpen: false,
            emojiI18n: {
                search: '搜索',
                notfound: 'No Emoji Found',
                categories: {
                    search: '搜索结果',
                    recent: '经常使用',
                    smileys: '表情与情感',
                    people: '人物与身体',
                    nature: '动物与自然',
                    foods: '食物与饮料',
                    activity: '活动',
                    places: '旅行与地理',
                    objects: '物品',
                    symbols: '符号标志',
                    flags: '旗帜',
                    custom: 'Custom',
                    joy: '哭笑'
                }
            },
        }
    },
 computed: {
        emojiIndex() {
            return new EmojiIndex(data);
        }
    },
 methods: {
  // 选中emoji方法
        handlerEmoji(event) {
            console.log(event);
        },
 }
}
</script>