Vue - 超详细实现 emoji 表情，安装并使用 v-emoji-picker 表情插件及各种功能，可在光标处插入表情和文字混排（提供了存入后端数据库的转码和解码方案，轻松将文字和表情发送给接口）

前言

网上的教程都太乱了，各种 emoji 表情不兼容、无法汉化等一堆问题，很难进行复制使用。

本文 实现了在 vue2 / vue3 / nuxt 项目中，接入 emoji 表情包插件 v-emoji-picker 详细教程，可在输入框内表情与文字并排存在（在光标的指定位置插入表情），解决了前端 emoji 表情无法存入后端数据库的问题，提供了诸多便利功能，例如中文搜索、显示隐藏搜索栏、显示隐藏顶部表情选项卡、主题色切换等，

提供了 emoji 表情存入后端数据库的前端处理方法，对文字和表情进行统一编码与解码（为了存入数据库）。

---

如下图所示，只提供了 “基础” 功能，一些交互和样式需要您自行处理，

您可以直接复制源码，按照示例教程稍微改改样式就能用了。

示例代码干净整洁，无任何乱七八糟的废代码

第一步

目前，