前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在线客服系统聊天界面,增加emoji表情图标,纯emoji点击后发送

在线客服系统聊天界面,增加emoji表情图标,纯emoji点击后发送

作者头像
唯一Chat
发布2023-04-26 19:02:31
3130
发布2023-04-26 19:02:31
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

之前开发客服系统访客聊天界面,发送表情部分,是自己本地的一堆小图片

现在其实可以直接展示emoji,效果也是不错的,还不需要自己再去解析表情路径

首先准备一个emoji的json字符串

代码语言:javascript
复制
emojis:{"smile":"?","smiley":"?","grinning":"?","blush":"?","wink":"?","heart_eyes":"?","kissing_heart":"?","kissing_closed_eyes":"?","kissing":"?","kissing_smiling_eyes":"?","stuck_out_tongue_winking_eye":"?","stuck_out_tongue_closed_eyes":"?","stuck_out_tongue":"?","flushed":"?","grin":"?","pensive":"?","relieved":"?","unamused":"?","disappointed":"?","persevere":"?","cry":"?","joy":"?","sob":"?","sleepy":"?","disappointed_relieved":"?","cold_sweat":"?","sweat_smile":"?","sweat":"?","weary":"?","tired_face":"?","fearful":"?","scream":"?","angry":"?","rage":"?","triumph":"?","confounded":"?","laughing":"?","yum":"?","mask":"?","sunglasses":"?","sleeping":"?","dizzy_face":"?","astonished":"?","worried":"?","frowning":"?","anguished":"?","imp":"?","open_mouth":"?","grimacing":"?","neutral_face":"?","confused":"?","hushed":"?","smirk":"?","expressionless":"?","man_with_gua_pi_mao":"?","man_with_turban":"?","cop":"?","construction_worker":"?","guardsman":"?","baby":"?","boy":"?","girl":"?","man":"?","woman":"?","older_man":"?","older_woman":"?","person_with_blond_hair":"?","angel":"?","princess":"?","smiley_cat":"?","smile_cat":"?","heart_eyes_cat":"?","kissing_cat":"?","smirk_cat":"?","scream_cat":"?","crying_cat_face":"?","joy_cat":"?","pouting_cat":"?","japanese_ogre":"?","japanese_goblin":"?","see_no_evil":"?","hear_no_evil":"?","speak_no_evil":"?","skull":"?","alien":"?","hankey":"?","fire":"?","sparkles":"?","star2":"?","dizzy":"?","boom":"?","anger":"?","sweat_drops":"?","droplet":"?","zzz":"?","dash":"?","ear":"?","eyes":"?","nose":"?","tongue":"?","lips":"?","thumbs_up":"?","-1":"?","ok_hand":"?","facepunch":"?","fist":"?","wave":"?","hand":"?","open_hands":"?","point_up_2":"?","point_down":"?","point_right":"?","point_left":"?","raised_hands":"?","pray":"?","clap":"?","muscle":"?","walking":"?","runner":"?","dancer":"?","couple":"?","family":"?","couplekiss":"?","couple_with_heart":"?","dancers":"?","ok_woman":"?","no_good":"?","information_desk_person":"?","raising_hand":"?","massage":"?","haircut":"?","nail_care":"?","bride_with_veil":"?","person_with_pouting_face":"?","person_frowning":"?","bow":"?","tophat":"?","crown":"?","womans_hat":"?","athletic_shoe":"?","mans_shoe":"?","sandal":"?","high_heel":"?","boot":"?","shirt":"?","necktie":"?","womans_clothes":"?","dress":"?","running_shirt_with_sash":"?","jeans":"?","kimono":"?","bikini":"?","briefcase":"?","handbag":"?","pouch":"?","purse":"?","eyeglasses":"?","ribbon":"?","closed_umbrella":"?","lipstick":"?","yellow_heart":"?","blue_heart":"?","purple_heart":"?","green_heart":"?","broken_heart":"?","heartpulse":"?","heartbeat":"?","two_hearts":"?","sparkling_heart":"?","revolving_hearts":"?","cupid":"?","love_letter":"?","kiss":"?","ring":"?","gem":"?","bust_in_silhouette":"?","speech_balloon":"?","footprints":"?"}

然后就是界面上循环展示这个emoji了

代码语言:javascript
复制
            <div class="emojis" v-show="showEmojis">
                <span v-for="key in emojis" @click="visitor.message+=key;showEmojis=false">{{key}}</span>
            </div>

需要加一些样式进行排版,可以参考我的样式

代码语言:javascript
复制
    .emojis{
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        height: 160px;
        overflow: auto;
        font-size: 20px;
    }
    .emojis span{
        display: block;
        margin: 5px;
    }

showEmojis就是判断是否展示这些图标,可以加到笑脸按钮上

代码语言:javascript
复制
<div @click="showEmojis==true?showEmojis=false:showEmojis=true"  class="chatJiahaoBtn iconfont icon-xiaolian2"></div>

效果图如下

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯企点客服
腾讯企点客服(Tencent QiDian Customer Service)是为销售和客服提供多渠道商机转化与客户服务的智能客服平台。基于腾讯云的即时通讯、音视频、人工智能、大数据、云呼叫中心等技术,以个性化服务和精准客户洞察撬动销售转化与复购增购。企点客服全面覆盖了从销售到服务的全链路业务场景,帮助企业构建一体化的客户运营体系,极大提升了企业获客、待客、留客的效率。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com