Vue表情组件指南：v-emoji-picker、vue3-emoji-picker和vue3-emoji的用法详解
简介：本文介绍三款Vue表情组件：v-emoji-picker、vue3-emoji-picker和vue3-emoji，涵盖安装方法、基础用法及功能特点，帮助开发者快速实现表情选择功能，提升用户交互体验
以下是 v-emoji-picker、vue3-emoji-picker、vue3-emoji 三个 Vue Emoji 组件的用法对比与核心功能解析，结合性能、兼容性和功能场景提供明确推荐：
1. v-emoji-picker（Vue 2 专用）
适用场景：Vue 2 项目需要轻量级、高定制化的 Emoji 选择器。
核心功能：
Unicode 兼容：基于最新 Unicode 标准，支持全量 Emoji。
高度可定制：
自定义表情分类（customCategories）、每行表情数（emojisByRow）、暗黑模式（dark）。
支持“最近使用”表情（limitFrequently）、搜索功能（showSearch）。
事件驱动：通过 @select 事件获取选中的 Emoji 数据（emoji.data）
安装：
npm install v-emoji-picker
# 或
yarn add v-emoji-picker
使用：
// main.js 全局注册
import Vue from 'vue';
import VEmojiPicker from 'v-emoji-picker';
Vue.use(VEmojiPicker);
// 组件内使用
输出: {{ text }}
属性：
属性
类型
默认值
作用
customEmojis
Array
[]
自定义表情符号数组
customCategories
Array
[]
自定义分类数组
limitFrequently
number
15
频繁使用的表情限制数量
emojisByRow
number
5
每行的表情数
continuousList
boolean
false
是否连续滚动列表
emojiSize
number
32
表情大小
emojiWithBorder
boolean
true
表情是否有边框
showSearch
boolean
true
是否显示搜索功能
showCategories
boolean
true
否显示分类选项
dark
boolean
false
是否开启暗黑模式
initialCategory
string
Peoples
初始类别
exceptCategories
Array
[]
排除的类别数组
exceptEmojis
Array
[]
排除的表情符号数组
i18n
Object
{}
国际化对象
事件：
事件
作用
select
选中表情时触发
changeCategory
切换分类时触发
优势：轻量（体积小）、功能全面，适合对性能敏感的 Vue 2 项目。
局限：仅支持 Vue 2，Vue 3 项目需选择其他方案。
2. vue3-emoji-picker（Vue 3 推荐）
适用场景：Vue 3 项目需要现代化、功能丰富的 Emoji 选择器。
核心功能：
Vue3 优化：基于 Composition API 和 Teleport，性能更优。
灵活配置：
支持系统原生表情（native）、隐藏搜索框（hide-search）
禁用分组（disabled-groups）、自定义分组名称（group-names）
插入模式（mode：prepend/insert/append）
事件与数据：通过 @select 事件获取 Emoji 对象（含 Unicode、分类等信息）
安装：
npm install vue3-emoji-picker
# 或
yarn add vue3-emoji-picker
使用：
// 组件内使用（
属性：
属性
类型
默认值
描述
native
bool
false
是否使用系统原生表情代替图片
hide-search
bool
true
显示或隐藏搜索输入框
hide-group-icons
bool
false
显示或隐藏分组图标
hide-group-names
bool
false
显示或隐藏分组名称
disable-sticky-group-names
bool
false
禁用分组名称的固定位置显示
disable-skin-tones
bool
false
禁用肤色选择
disabled-groups
arr
[]
禁用特定的分组或类别。参见可用分组
group-names
obj
{}
更改任意分组名称。参见默认分组名称
static-texts
obj
{}
参考静态文本选项表
pickerType
str
""
选择选择器类型，可能的选项：input、textarea（弹出输入框或文本区域）
mode
str
‘insert’
选择插入模式，可能的选项：prepend、insert、append
offset
int
6
设置表情弹窗的偏移量
additional-groups
obj
{}
添加自定义分组，键为从蛇形命名转换过来的分组名称
group-order
arr
[]
覆盖分组的排序
group-icons
obj
{}
通过在键上传递 SVG 来覆盖分组图标
display-recent
bool
false
显示最近使用的表情
theme
str
‘light’
可选值：‘light’、‘dark’、‘auto’
placeholder
str
“Search emoji”
更新搜索输入框的占位符文本
skinTone
str
“Skin tone”
底部肤色按钮的文本
最后两个是静态属性，使用方法： :static-texts=“{ placeholder: ‘搜索单元格’}”
方法名
示例
描述
@select
@select=“onSelectEmoji” />
当选择/点击一个表情时触发此事件，事件回调的第一个参数接收所选的表情
@update:text
@update:text=“onChangeText” />
当输入文本发生变化时触发此事件，事件回调的第一个参数接收改变后的文本
优势：专为 Vue 3 设计，功能全面且性能优化，支持 TypeScript。
推荐理由：Vue 3 生态首选，社区活跃，文档完善。
重要提示： 如果使用 TypeScript，请在 .d.ts 文件中添加 declare module ‘vue3-emoji-picker’
3. vue3-emoji（功能精简型）
适用场景：Vue 3 项目需要基础 Emoji 支持，无需复杂配置。
核心功能：
基础功能：支持 Emoji 选择、自定义大小（custom-size）、主题（customTheme）
最近使用：通过 recent 属性启用
事件驱动：通过 @click-emoji 事件获取 Emoji 值
安装：
npm install vue3-emoji
# 或
yarn add vue3-emoji
使用：
// 组件内使用
输出: {{ text }}
属性：
配置名
类型
默认值
描述
v-model
string
‘’
可以进行数据的双向绑定（需要开启textArea）
size
‘mid’、‘small’、‘big’
mid
用于调整整体大小
theme
‘dark’、‘default’
default
主题切换 支持亮色和暗黑主题
manualClose
boolean
false
设置为true可以手动控制弹出框的关闭
optionsName
-
{}
翻译原有板块名字
disableGroup
string
[]
禁用某些板块
defaultSelect
string
‘Smileys & Emotion’
默认选中板块，注意：如果指定了新名字，需要传入新名字
recent
boolean
false
开启最近使用emoji功能
fulldata
boolean
false
如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象
keep
boolean
false
如果指定为true 那么表情框关闭将不会销毁组件
textArea
boolean
false
开启文本框功能选项
textAreaOption
Emoji.TextAreaOptions
见类型定义
你可以定义textarea的一些选项
fixPos
六个值
FixType
可以传入一个值来固定表情框的位置
customSize
Emoji.CustomSize
见类型定义
如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值
customTheme
Emoji.CustomTheme
见类型定义
自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值
customIcon
Emoji.CustomIcon
见类型定义
自定义tab切换栏的显示
customTab
Emoji.ObjectItem
见类型定义
你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的emoji
unicodeVersion
number
11
在某些设备上可能不能兼容高版本的emojiunicode
skin
-
none
暂时无法很好的支持
fixPos = ‘upleft’ | ‘upright’ | ‘upcenter’ | ‘downleft’ | ‘downright’ | ‘downcenter’; //控制表情弹出框的位置
优势：简单易用，适合快速集成。
局限：功能较基础，缺乏高级配置（如分组禁用、自定义分类）。
有遗漏或者不对的可以在我的公众号留言哦