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