文檔: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>