文档:emoji-mart-vue-fast - npm (npmjs.com)
非常简单 代码直接照抄即可
1. 引入
pnpm install emoji-mart-vue-fast
2. 使用
<template><Picker:data="emojiIndex":emojiSize="18":showPreview="false":infiniteScroll="false":i18n="emojiI18n"set="apple"@select="handleEmoji"/>
<template><script setup>
// all emoji sets.
import data from 'emoji-mart-vue-fast/data/all.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'// 定义i18n
const emojiI18n = {search: '搜索',notfound: 'No Emoji Found',categories: {search: '搜索结果',recent: '经常使用',smileys: '表情与情感',people: '人物与身体',nature: '动物与自然',foods: '食物与饮料',activity: '活动',places: '旅行与地理',objects: '物品',symbols: '符号标志',flags: '旗帜',custom: 'Custom',joy: '哭笑'}
}
const emojiIndex = new EmojiIndex(data)
// 选中emoji
const handleEmoji = (e) => {console.log(e)
}
</script>