智能在线客服系统源码GOFLY开发日志- 12. 聊天点击emoji 展示表情的实现

在任何im聊天软件里,一般在聊天框的周围,都有一个😊这样的小图标,可以点击展示出emoji表情的列表。在我的在线客服系统里,也是有这样的小功能,如下图:

智能在线客服系统源码GOFLY开发日志- 12. 聊天点击emoji 表情的实现

点击小笑脸,展示出表情列表

聊天表情图标最基本的数据结构

emojis=[
    {"[a]":"/static/images/0.gif"},
    {"[b]":"/static/images/1.gif"}
]
emojisMap=[
    {"name":"[a]","path":"/static/images/0.gif"},
    {"name":"[b]","path":"/static/images/1.gif"}
]

表情图片的物理存储路径/static/images/

智能在线客服系统源码GOFLY开发日志- 12. 聊天点击emoji 表情的实现

在数据库存储的内容是
“face[a] face[b]”字符串,展示的时候会把这俩字符串替换成
“<img src=”/static/images/0.gif”/> <img src=”/static/images/1.gif”/>”

实现基本的存储结构

function emojiGifs(){
    var emojiGifs=[];
    var emojiTxt = ["[a]", "[b]", "[c]", "[d]", "[e]", "[f]", "[g]", "[h]", "[i]", "[j]", "[k]", "[l]", "[m]", "[n]", "[o]", "[p]", "[q]", "[r]", "[s]", "[t]", "[u]", "[v]", "[w]", "[x]", "[y]", "[z]", "[aa]", "[bb]", "[cc]", "[dd]", "[ee]", "[ff]", "[gg]", "[hh]", "[ii]", "[jj]", "[kk]", "[ll]", "[mm]", "[nn]", "[oo]", "[pp]", "[qq]", "[rr]", "[ss]", "[tt]", "[uu]", "[vv]", "[ww]", "[xx]", "[yy]", "[zz]", "[a1]", "[b1]", "[good]", "[NO]", "[c1]", "[d1]", "[e1]", "[f1]", "[g1]", "[h1]", "[i1]", "[g1]", "[k1]", "[l1]", "[m1]", "[n1]", "[o1]", "[p1]", "[q1]", "[cake]"];
    for(var i=0;i<emojiTxt.length;i++){
        emojiGifs[emojiTxt[i]]="/static/images/face/"+i+".gif";
    }
    return emojiGifs;
}
function emojiGifsMap(){
    var emojiMap=[];
    var emojis=emojiGifs();
    for(var key in emojis){
        emojiMap.push({"name":key,"path":emojis[key]});
    }
    return emojiMap;
}

展示图标列表,我这里是vue里的用法,循环emojiMap,展示出图片文件。并且给每个图标增加上了点击事件faceIconClick

                <ul class="faceBoxList">
                    <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
                </ul>

点击事件的处理很简单,就是拼接一下内容,原字符串拼接出face[a]

        //表情点击事件
        faceIconClick:function(index){
            this.messageContent+="face"+this.face[index].name;
        },

点击展示,再点击隐藏的vue实现方式

用vue来实现这样的效果非常简单

<div v-on:click="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
<div v-if="showFaceIcon">图标表情</div>

后面还遇到了哪些问题和知识点将会继续进行总结。

演示网站:
gofly.sopans.com

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

楼主有没有很早期的版本可以clone学习下哈哈,gitee上的版本登录不了后台。

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!