? ? ?最近在做一個(gè)通訊類型的項(xiàng)目，當(dāng)然離不開(kāi)表情的發(fā)送與接收。在這塊我大致說(shuō)下回顯剂陡，發(fā)送的時(shí)候你可以照著邏輯回繞下解寝，發(fā)送較為簡(jiǎn)單扛禽。著重說(shuō)下回顯，項(xiàng)目采用的是vue-cli,在做表情回顯的時(shí)候踩到了一些坑有序，在這篇文章中跟大家分享下我的解決方案握巢，當(dāng)然晕鹊，你有更好的方法也可以進(jìn)行發(fā)表評(píng)論。
? ? ?起初镜粤，我用到的方法是將聊天記錄的內(nèi)容進(jìn)行遍歷捏题。再通過(guò)管道符進(jìn)行內(nèi)置的過(guò)濾方法處理。
<div class="cl-content-text-box"> // 組件中遍歷的部分
{{ item.message | imgfilter }}
</div>
? ? ?list是我整理的表情包的數(shù)據(jù)肉渴，我拿到下標(biāo)再進(jìn)行本地圖片的獲取公荧。假設(shè)給好友發(fā)送一個(gè)哈哈的表情，我們發(fā)送給后臺(tái)的數(shù)據(jù)將是 ‘[哈哈]’這樣式的同规，接受的時(shí)候同樣也是這種格式的循狰，處理的時(shí)候?qū)?nèi)容中的‘[哈哈]’窟社，這樣的數(shù)據(jù)替換成我們本地的圖片路徑，再進(jìn)行渲染绪钥。
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
})
}
以上代碼的出的結(jié)論
? ? ? what? 什么鬼灿里。后來(lái)又根據(jù)這種形式的進(jìn)一步處理了一下，具體細(xì)節(jié)忘掉了程腹，但是還是沒(méi)達(dá)到想要的效果匣吊。中間也查了一些資料，這樣的情況目前還不知道解決辦法寸潦。
后來(lái)再處理中色鸳，也遇到了最后以字符串的形式顯示到頁(yè)面上了〖‘<img src='路徑' >’命雀。。斩箫。吏砂。有點(diǎn)扯，還不是想要的乘客，vue中的胡子語(yǔ)法支持方法狐血、表達(dá)式，但并解析不了字符串的元素寨典。果斷換了一個(gè)方案氛雪。
<div class="cl-content-text-box" v-html="$options.filters.dataImgFilter(item.message)">
</div>
使用了$options,它用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng)。需要在選項(xiàng)中包含自定義屬性時(shí)會(huì)有用耸成，我在一個(gè)自定義屬性的方法中定義了一個(gè)自定義的filter报亩，在通過(guò)v-html，他可以解析標(biāo)簽元素井氢。在pc中發(fā)送><&等弦追，這些字符他會(huì)隱式轉(zhuǎn)換成轉(zhuǎn)義字符，同樣的我們?cè)谙旅娴姆椒ㄖ幸煌瑢⑺鎿Q掉
轉(zhuǎn)義字符
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
})
}
},
圓滿解決圖像回顯
