聊天工具的项目开发到了表情功能，由于目前会话的输入区域使用的是 textarea 而非富文本编辑器，所以表情功能也需要兼顾 textarea 进行开发。
简单聊聊几种表情的实现方案，孰优孰劣。
使用输入法输入表情
Textarea中支持接受输入法输入的表情，在 macOs 中直接输入“微笑”，会直接打印出😊的表情，和文字没区别。
但是这种方案不好的点在于只能手输，没办法达到选择的效果。
使用Unicode编码输入表情
在 Unicode 编码中存在对应表情的编码区间，位于基本多语言面（Basic Multilingual Plane，BMP），码点在 U+1F600 到 U+1F6FF。
因为目前使用的是 textarea 作为输入框，所以 Unicode 编码在输入框显示出来是纯文本，这就导致用户很有可能出现误修改。
另外会话信息的展示区域，现在也是直接使用的模板语法，需要在展示区使用 v-html 才能正常展示表情，否则也是纯文本。
但是基于 Unicode 编码的这种模式非常轻量，并不需要额外的库和特殊操作。
使用自定义内容进行对应
使用自定义内容进行对应，这应该是QQ的表情方案（虽然我没看过源码，纯猜测）。
QQ的输入框在使用 “/” 进行输入的时候会弹出相应的表情提示，确定以后变成表情。这里面大概率是经历了对特定编码的转换。
同理我们也可以用这种方案进行转换，可以使用特定的符号在系统中进行解析，生成表情。
比如系统中写死 “[wx]” 代表是的 😊 ，当输入框通过 input 事件监听到存在 “[wx]” 的时候，代码将其自动转换为 😊。
插个眼，后面把 Unicode 编码通过这种方式实现一下。
使用 emoji-mart-vue 插件
使用插件是性价比最高的方案，这个插件相当于直接把输入的emoji集成了，无需改造原本的代码，插入的emoji表情输入法输入的没有区别。
唯一可能存在的瑕疵可能是没办法自定义。
安装
npm install emoji-mart-vue-fast
使用
<template>
<Picker :data="emojiIndex" :emojiSize="18" :showPreview="false" :infiniteScroll="false" :i18n="emojiI18n"
set="apple" @select="handlerEmoji" />
</template>
<script>
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
export default {
components: { Picker, EmojiIndex },
data() {
return {
editorValue: "",
emojiOpen: false,
emojiI18n: {
search: '搜索',
notfound: 'No Emoji Found',
categories: {
search: '搜索结果',
recent: '经常使用',
smileys: '表情与情感',
people: '人物与身体',
nature: '动物与自然',
foods: '食物与饮料',
activity: '活动',
places: '旅行与地理',
objects: '物品',
symbols: '符号标志',
flags: '旗帜',
custom: 'Custom',
joy: '哭笑'
}
},
}
},
computed: {
emojiIndex() {
return new EmojiIndex(data);
}
},
methods: {
// 选中emoji方法
handlerEmoji(event) {
console.log(event);
},
}
}
</script>
结论
想要自定义可以尝试第三种方案，现成的直接第四种方案。
