基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改

介绍

最近的项目用到了表情包，咱们以前项目有用到emoji-vue。我就直接拿来用了。使用过程中真的一言难尽啊~~~~~
先附上一张这个插件在Vue中使用的列子。可以清楚的看到一个比较重要的方法onInput和myText属性。没错这就是我一言难尽的地方，使用这个demo会出现两个问题

这里有个在线测试地址emoji-vue在线测试

接下来咱们提提这个插件两处问题，先给一张自己测试的图。

问题

1 我测试的时候，开始输入了文字，后面准备在文字后面添加表情，但是无论怎么搞，表情都会在前面添加
2 另一个问题显而易见，我添加的表情和实际表情不一样

解决办法

问题一： 表情始终在最前面

原因： 具体原因我不知道，但是当我们添加 :value="myText"时就会出现表情始终添加在最前

解决方法 添加:value="myText"有问题，那我们就不添加呗。
怎么拿到value？？？
还不简单，直接通过js拿呗。

let emojiClass = `.emoji-vue-wraper textarea` // 这个的自己找，我写这个可能不对
let remark = document.querySelector(emojiClass).value

问题二： 表情不一致

原因 通过下面两张图咱们可以，一个时图片一个是字体图标。能一样吗？

解决办法：是不是咱们可以直接拿到里面的结构，之后在Vue中用v-html还原结构就可以了？？
就是这么办的。下面是代码。

let emojiClass = `.emoji-vue-wraper textarea` // 这个的自己找，我写这个可能不对
// let remark = document.querySelector(emojiClass).value
let remark = document.querySelector(emojiClass).nextSibling.innerHTML

拿到这个结构了，没图片咋搞？？
细节来了，看下图一，这个就是重中之重啊，这不有图片吗，哎哟，不错哟。还用的精灵图。background:url(’/assets/img/emoji_spritesheet_0.cce267d0.png’)。
知道图片了还不快下载放自己的项目里面，在等啥呢，等炒菜啊。目录结构又看下图三。要在public文件夹下创建assets文件夹在创建img文件夹在把图片放进去，图片名称完全一样哈，乖乖，不一样不行别怪我。