你也许会发现微信表情和输入法自带的emoji并不完全一样。正如市面上很多app，大多数有自定义的表情库。那前端是如何实现的呢？先来看看我做好的仿微信的演示：
成果展示
分析
我们先来看一看自定义表情的特点：
- 像一个图片icon
- 能和文字一起排版
自定义表情的显示模型：
按照以上模型，我们可以给表情位定义一个<img />，但前端组件input框并不支持非字符的输入又该怎么办呢？
给每个表情定义一个key值（字符名称），发送消息后再转换成相应的value值（img标签）
细心的朋友，特别是使用Iphone的朋友（原生安卓不适用），当你们点击要输入的表情时输入框并没有立即显示出表情，而是显示的key值，如：[鼓掌]。消息发出后才变成相应的value值。
减少资源加载
OK，以上就是实现自定义表情的全部理论，看起来并不复杂。但表情图片一个一个加载太占资源了，特别是微信动不动就是100多个表情，怎么办呢？我们能不能把表情拼凑成一个文件加载呢？可以！
把表情做在一张png图上，然后用img的clip-path属性定位特定区域。
代码实现
实现细节放在了github上，封装成了Vue插件，熟悉Vue的小伙伴可以直接使用，欢迎各位留言交流哦~
