Vue表情包输入组件实现代码

情绪

vue的表达式输入组件https://gitee.com/jiangliyue/vue_expression_input_module

索引是用法示例，情感是组件代码(这里用的是微信表情包的地址，可以根据需要修改)

下载、安装并启动项目以查看效果

npm安装npm运行开发

情感文件夹下的情感文件说明

实现原理是根据字段匹配在线表情包图片。替换码中img标签的地址就是表情图片的地址，可以替换mounted () {const name=this。$ el.innerhtml const list=['微笑'，'撇嘴'，'颜色'，'目瞪口呆'，'骄傲'，'流泪'，'害羞，闭嘴，睡觉，哭，尴尬，生气，淘气，咬牙切齿，惊讶，难过，冷静，出冷汗，发疯，呕吐，微笑。诅咒，质疑，嘘，晕倒，折磨，腐烂，骷髅，敲打，再见，擦汗，抠鼻子，鼓掌，尴尬，坏笑而离开西瓜，啤酒，篮球，乒乓球，咖啡，米饭，猪头，玫瑰，枯萎，展现爱，爱，心碎，蛋糕，闪电，炸弹和刀子握手'，'胜利'，'抱拳'，'诱惑'，'拳头'，'坏'，'爱你'，' NO '，' OK '，'爱'，'吻'，'跳'，'颤抖'，'救火'，'转'右太极']让指数=榜单。(name)的索引让img html=` img src=' http :https://RES . wx . QQ.com/mpres/htm length/images/icon/emotion/$ { index }。gif ' '这个。$ nexttick (()={this。$ el.innerhtml=imghtml})}，情感文件夹下的索引文件描述

通过循环列表生成表情选择框

div class=' emotion-box-line ' v-for='(line，I)在列表中' : key=' I ' emotion class=' emotion-item ' v-for='(item，I) inline' : key=' I' @ click。native=' click handler(item)' { { item } }/emotion/div最后需要注意的是，相关字符串保存在表情包的注释后的后台，显示时需要还原为图片。具体方法请参考索引文件。我这里用的是正则匹配变换，挺方便的。

div class='text-place '！- /\#[\u4E00-\u9FA5]{1，3 } \；/gi与#XXX匹配；-PV-html=' content . replace(/\ #[\ u4e 00-\ u9 fa 5]{ 1，3 } \；/gi，情感)'/p /div就这么简单。希望对大家的学习有帮助，支持我们。