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);
// 组件内使用
<template>
<VEmojiPicker @select="onSelectEmoji" />
<p>输出: {{ text }}</p>
</template>
<script>
export default {
data() {
return { text: '' };
},
methods: {
onSelectEmoji(emoji) {
this.text += emoji.data;
}
}
};
</script>属性：
| 属性 | 类型 | 默认值 | 作用 |
|---|---|---|---|
| customEmojis | Array<IEmoji> | [] | 自定义表情符号数组 |
| customCategories | Array<ICategory> | [] | 自定义分类数组 |
| 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<ICategory> | [] | 排除的类别数组 |
| exceptEmojis | Array<IEmoji> | [] | 排除的表情符号数组 |
| 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使用：
// 组件内使用（<script setup> 语法）
<template>
<EmojiPicker :native="true" @select="onSelectEmoji" />
<p>输出: {{ text }}</p>
</template>
<script setup>
import { ref } from 'vue';
import EmojiPicker from 'vue3-emoji-picker';
import 'vue3-emoji-picker/css';
const text = ref('');
const onSelectEmoji = (emoji) => {
text.value += emoji.i; // emoji.i 为表情字符
};
</script>属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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使用：
// 组件内使用
<template>
<V3Emoji @click-emoji="onClickEmoji" :recent="true" />
<p>输出: {{ text }}</p>
</template>
<script setup>
import { ref } from 'vue';
import V3Emoji from 'vue3-emoji';
import 'vue3-emoji/dist/style.css';
const text = ref('');
const onClickEmoji = (val) => {
text.value += val;
};
</script>属性：
| 配置名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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’; //控制表情弹出框的位置
优势：简单易用，适合快速集成。
局限：功能较基础，缺乏高级配置（如分组禁用、自定义分类）。
有遗漏或者不对的可以在我的公众号留言哦
