js 转企业微信表情
思路:根据固定的微信表情对照表和精灵图 使用背景图片的方式显示 两者间有一定的规律
// 微信表情对照表
const emojiTxtArr = ‘[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡][大哭][尴尬][发怒][调皮][呲牙][惊讶][难过][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][困][惊恐][憨笑][悠闲][咒骂][疑问][嘘][晕][衰][骷髅][敲打][再见][擦汗][抠鼻][鼓掌][坏笑][右哼哼][鄙视][委屈][快哭了][阴险][亲亲][可怜][笑脸][生病][脸红][破涕为笑][恐惧][失望][无语][嘿哈][捂脸][奸笑][机智][皱眉][耶][吃瓜][加油][汗][天啊][Emm][社会社会][旺柴][好的][打脸][哇][翻白眼][666][让我看看][叹气][苦涩][裂开][嘴唇][爱心][心碎][拥抱][强][弱][握手][胜利][抱拳][勾引][拳头][OK][合十][啤酒][咖啡][蛋糕][玫瑰][凋谢][菜刀][炸弹][便便][月亮][太阳][庆祝][礼物][红包][福][烟花][爆竹][猪头][跳跳][发抖][转圈]’.split(‘][’)
精灵图
方法
import emoji from '@/assets/imgs/weixintu.png'
// 微信表情对照表
const emojiTxtArr = '[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡][大哭][尴尬][发怒][调皮][呲牙][惊讶][难过][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][困][惊恐][憨笑][悠闲][咒骂][疑问][嘘][晕][衰][骷髅][敲打][再见][擦汗][抠鼻][鼓掌][坏笑][右哼哼][鄙视][委屈][快哭了][阴险][亲亲][可怜][笑脸][生病][脸红][破涕为笑][恐惧][失望][无语][嘿哈][捂脸][奸笑][机智][皱眉][耶][吃瓜][加油][汗][天啊][Emm][社会社会][旺柴][好的][打脸][哇][翻白眼][666][让我看看][叹气][苦涩][裂开][嘴唇][爱心][心碎][拥抱][强][弱][握手][胜利][抱拳][勾引][拳头][OK][合十][啤酒][咖啡][蛋糕][玫瑰][凋谢][菜刀][炸弹][便便][月亮][太阳][庆祝][礼物][红包][福][烟花][爆竹][猪头][跳跳][发抖][转圈]'.split('][')
// 遍历后得到的表情对照数组
const emojiList = emojiTxtArr.map((item, index) => {
if (index === 0) {
return item + ']'
} else if (index === emojiTxtArr.length - 1) {
return '[' + item
} else {
return '[' + item + ']'
}
})
methods:{
// 处理文字换行和微信表情
initTxt(txt) {
let TXT = txt.replaceAll('\n', '<br/>')
emojiList.forEach((item, index) => {
const style = `background-image: url(${emoji});display: inline-block;vertical-align: -5px;background-position: -${(31 + 84 * (index % 9))}px -${(31 + 90 * Math.floor(index / 9))}px;width: 50px;height: 50px;margin:-15px;transform: scale(0.4);`
TXT = TXT.replaceAll(item, `<div style="${style}"></div>`)
})
return TXT
},
}
//使用
<!-- <div class="f14" v-html="initTxt('你是一个小可爱[愉快]')"> </div>
<div v-html="initTxt('你是一个小可爱[流泪]')"> </div>
<div v-html="initTxt('你是一个小可爱[大哭]')"> </div> -->