其實很早都想在博客的留言和評論處使用表情包，奈何博客需要完善的地方太多。于是一直推到了這幾天，具體實現效果在博客上可以看到。

在網上查了下，發現微信官方的表情包對外開放。具體規則想如下，于是就有了思路

var EmotionList = ['微笑', '撇嘴', '色'];//改數組沒有寫完全 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif">//微笑對應的動圖 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif">//撇嘴對應的動圖 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif">//色對應的動圖

我的思路是將表情包組件做成一個子組件，在需要使用表情包的父組件里使用。

首先父組件的input周圍，比如留言框后會有個表情包彈框按鈕。點擊該按鈕會彈出表情包彈框，選擇表情后彈框關閉，留言框中追加進表情文字，如[[微笑]]。在form submit時，正則匹配出textarea里的像’[[微笑]]'這些字段，替換成<img https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif>，然后正常上傳后端接口即可。最后前端展示留言的列表展示留言文本為html格式即可。

具體子父組件間交互是這樣的。當父組件點擊表情彈框按鈕時，父組件通過Dom直接操作子組件屬性，使表情彈框彈出。選擇好某個表情后，表情彈框關閉，這半步在子組件內部可直接操作，無需子父交互。選中表情關閉彈框的同時還要通知父組件（emit）將選中表情的漢字追加在輸入框中。最終父組件提交輸入框內容時，正則匹配替換漢字表情為gif動圖標簽即可。

具體代碼如下：
子組件（表情包）代碼如下：

<template><div class="EmoticonListCover" v-if="Show" @click="OpenEmotion(false)"><div class="EmoticonList"><div class="PicItem" v-for="(item,i) in EmotionList" @click="ClickEmoticon(i)" :key="i"><img :src=" 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' + i + '.gif'"></div></div></div> </template><script>export default {name: "Emotion",data:function(){return {Show:false,EmotionList:['微笑', '撇嘴', '色', '發呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭','尷尬', '發怒', '調皮', '呲牙', '驚訝', '難過', '酷', '冷汗', '抓狂', '吐', '偷笑', '可愛','白眼', '傲慢', '饑餓', '困', '驚恐', '流汗', '憨笑', '大兵', '奮斗', '咒罵', '疑問', '噓','暈', '折磨', '衰', '骷髏', '敲打', '再見', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼','右哼哼', '哈欠', '鄙視', '委屈', '快哭了', '陰險', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒','籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '示愛', '愛心', '心碎', '蛋糕', '閃電', '炸彈','刀', '足球', '瓢蟲', '便便', '月亮', '太陽', '禮物', '擁抱', '強', '弱', '握手', '勝利', '抱拳', '勾引','拳頭', '差勁', '愛你', 'NO', 'OK', '愛情', '飛吻', '跳跳', '發抖', '慪火', '轉圈', '磕頭', '回頭', '跳繩', '揮手','激動', '街舞', '獻吻', '左太極', '右太極'],}},methods:{//選中表情ClickEmoticon:function (EmoticonNo) {var That = this;That.Show = false;That.$emit('AppendInputValue','[[' + That.EmotionList[EmoticonNo] + ']]');},OpenEmotion:function (Value) {this.Show = Value;}}} </script>

父組件使用如下：

<template>/*表情彈框打開按鈕*/<span class="EmotionButton" @click="OpenEmotions()"><i class="iconfont icon-face IconfontSize"></i></span><Emotion ref="EmotionB" @AppendInputValue="AppendMessageText"></Emotion> </template>export default {name: "BlogDetail",methods:{// 打開表情包彈框OpenEmotions:function () {this.$refs.EmotionB.OpenEmotion(true);},//表情選中后追加在inputAppendMessageText:function (EmotionChinese) {this.ArticleCommentText += EmotionChinese;}} }

效果演示地址：點擊留言框展示入口
代碼詳見github：博客Github

總結

以上是生活随笔為你收集整理的表情包组件(vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。