之前开发客服系统访客聊天界面，发送表情部分，是自己本地的一堆小图片
现在其实可以直接展示emoji，效果也是不错的，还不需要自己再去解析表情路径
首先准备一个emoji的json字符串
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了
<div class="emojis" v-show="showEmojis">
<span v-for="key in emojis" @click="visitor.message+=key;showEmojis=false">{{key}}</span>
</div>需要加一些样式进行排版，可以参考我的样式
.emojis{
background-color: #fff;
display: flex;
flex-wrap: wrap;
height: 160px;
overflow: auto;
font-size: 20px;
}
.emojis span{
display: block;
margin: 5px;
}showEmojis就是判断是否展示这些图标，可以加到笑脸按钮上
<div @click="showEmojis==true?showEmojis=false:showEmojis=true" class="chatJiahaoBtn iconfont icon-xiaolian2"></div>
效果图如下
