最近在做一个通讯类型的项目，当然离不开表情的发送与接收。在这块我大致说下回显，发送的时候你可以照着逻辑回绕下，发送较为简单。着重说下回显，项目采用的是vue-cli,在做表情回显的时候踩到了一些坑，在这篇文章中跟大家分享下我的解决方案，当然，你有更好的方法也可以进行发表评论。
起初，我用到的方法是将聊天记录的内容进行遍历。再通过管道符进行内置的过滤方法处理。
<div class="cl-content-text-box"> // 组件中遍历的部分
{{ item.message | imgfilter }}
</div>
list是我整理的表情包的数据，我拿到下标再进行本地图片的获取。假设给好友发送一个哈哈的表情，我们发送给后台的数据将是 ‘[哈哈]’这样式的，接受的时候同样也是这种格式的，处理的时候将内容中的‘[哈哈]’，这样的数据替换成我们本地的图片路径，再进行渲染。
const imgfilter = function (val) {
console.log(val)
return val.replace(/\[[^\]]+\]/g, function (tmp) {
console.log(tmp)
let img = document.createElement('img')
let indexOf = list.findIndex(data => data.name === tmp)
// let str = list[indexOf].src
img.src = `static/emoticons/Expression_" + ${indexOf} + "@2x.png`
// var img = "<img src='static/emoticons/Expression_" + indexOf + "@2x.png'>"
return img
})
}
以上代码的出的结论
what? 什么鬼。后来又根据这种形式的进一步处理了一下，具体细节忘掉了，但是还是没达到想要的效果。中间也查了一些资料，这样的情况目前还不知道解决办法。
后来再处理中，也遇到了最后以字符串的形式显示到页面上了。‘<img src='路径' >’。。。。有点扯，还不是想要的，vue中的胡子语法支持方法、表达式，但并解析不了字符串的元素。果断换了一个方案。
<div class="cl-content-text-box" v-html="$options.filters.dataImgFilter(item.message)">
</div>
使用了$options,它用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用，我在一个自定义属性的方法中定义了一个自定义的filter，在通过v-html，他可以解析标签元素。在pc中发送><&等，这些字符他会隐式转换成转义字符，同样的我们在下面的方法中一同将它替换掉
转义字符
filters: {
dataImgFilter: function (val) {
var arrEntities = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'}
return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t] })
.replace(/\[[^\]]+\]/g, function (tmp) {
let indexOf = EMOTIONSLIST.findIndex(data => data.name === tmp)
var img = `<img src='/static/emoticons/Expression_${indexOf + 1}@2x.png' style="width: 20px;height: 20px;">`
return img
})
}
},
圆满解决图像回显
