介绍
最近的项目用到了表情包,咱们以前项目有用到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文件夹在把图片放进去,图片名称完全一样哈,乖乖,不一样不行别怪我。