萬事開頭難，第一次接觸websocket客服聊天聊天得我，也遇到了許多坑，被折磨過來得我，今天總結下一部分功能（發送表情）我也是借鑒了別人得代碼，然后簡化后，功能也實現了。

<!-- 聊天記錄得界面 --><div class="common_chat-main" id="common_chat_main" ref="common_chat_main"><div class="common_chat-main-content"><div v-for="(item,index) in ChatEnArr.msgList" :key="index" style="overflow: hidden;"><div class="chatLeft" v-if="item.role==1"> <img class="kfPic" style="border-radius: 100%;" :src="item.avatarUrl" alt="">**<div class="chatBox"><p class="leftCk item-content common_chat_emoji-wrapper-global" v-if="item.contentType=='text'" v-html="getqqemojiEmoji(item.content)"></p>重點就在于（v-html="getqqemojiEmoji(item.content)"）通過v-html吧數據渲染在界面上</div>**<img class="imgPic" v-if="item.contentType=='image'" :src="item.content" @click="imgViewDialog_show(item.content)" alt=""></div><div class="chatRight" v-if="item.role==0"><div class="chatBox" v-if="item.contentType=='text'"><p class="leftCk item-content common_chat_emoji-wrapper-global" v-html="getqqemojiEmoji(item.content)"></p></div><img class="imgPic" v-if="item.contentType=='image'" :src="item.content" @click="imgViewDialog_show(item.content)" alt=""><img class="kfPic" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3421370747,2851767462&fm=26&gp=0.jpg" alt=""></div></div></div></div> <!-- 底部區域 （表情，文件，輸入內容，發送）--><div class="common_chat-footer"><div><!-- 文件選擇等操作 --><div class="opr-wrapper">表情選擇得組件**<common-chat-emoji class="item" ref="qqemoji" @select="qqemoji_selectFace"></common-chat-emoji>**<i style="font-size: 20px;" class="iconfont icon-tupian" @click="uploadPic(ChatEnArr.clientChatId)"></i></div><!-- 聊天輸入框 --><div class="input-wrapper">這個是輸入框（重點）**<divmaxlength="500"class="inputContent common_chat_emoji-wrapper-global"id="common_chat_input"contenteditable="true"></div></div>**<!-- 發送按鈕 --><el-buttontype="primary"size="small"class="send-btn"@click="sendText(ChatEnArr.clientChatId)">發送</el-button></div></div></div>

如何實現發送表情呢？

引入組件import common_chat_emoji from './common_chat_emoji.vue';注冊組件components: {commonChatEmoji: common_chat_emoji},//這部分就是上面說得為了吧內容，表情顯示在聊天框上，照搬就行/*** 轉換為QQ表情(聊天顯示的時候)*/getqqemojiEmoji: function(value) {if (value == undefined) {return;}var self = this;return value.replace(/\[(.+?)\]/g, function(item, value) {return self.$refs.qqemoji.getImgByFaceName(value);});},//這句是重點，將你選中的表情append到聊天框里rs.imgStr（打印出來就是 img標簽）/*** qqemoji選中表情*/qqemoji_selectFace: function(rs) {// for(var i in rs){$("#common_chat_input").append(rs.imgStr);// }},

//表情組件(新建vue文件，名字common_chat_emoji.vue)
注意：css里有個圖片路徑，記得改你自己的

<!-- qq表情 --> <template><div class="common_chat_emoji-wrapper common_chat_emoji-wrapper-global"><i style="font-size: 20px;cursor: pointer;" class="iconfont icon-biaoqing" @click="toggleFaceHidden"></i><div class="list-wrapper" v-show="!faceHidden"><div class="list-inner" @click="selectFace"><a v-for="(item, index) in qqemojiList" :key="index" class="item qqemoji" :title="item" :text="[item]" :class="'qqemoji'+index"></a></div></div></div> </template><script> export default {data() {return {qqemojiList: ['微笑', '撇嘴', '色', '發呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭', '尷尬', '發怒', '調皮', '呲牙', '驚訝', '難過', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饑餓', '困', '驚恐', '流汗', '憨笑', '悠閑', '奮斗', '咒罵', '疑問', '噓', '暈', '瘋了', '衰', '骷髏', '敲打', '再見', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼', '右哼哼', '哈欠', '鄙視', '委屈', '快哭了', '陰險', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒', '籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '嘴唇', '愛心', '心碎', '蛋糕', '閃電', '炸彈', '刀', '足球', '瓢蟲', '便便', '月亮', '太陽', '禮物', '擁抱', '強', '弱', '握手', '勝利', '抱拳', '勾引', '拳頭', '差勁', '愛你', 'NO', 'OK', '愛情', '飛吻', '跳跳', '發抖', '慪火', '轉圈', '磕頭', '回頭', '跳繩', '投降', '激動', '亂舞', '獻吻', '左太極', '右太極'],faceHidden: true};},methods: {/*** 切換表情界面的顯示*/toggleFaceHidden: function() {this.$data.faceHidden = !this.$data.faceHidden;},/*** 關閉表情窗口*/hideFaceWrapper: function() {var self = this;// 選中face也會隱藏表情窗口，這時判斷是否已經隱藏了setTimeout(function() {if (!self.$data.faceHidden) {self.$data.faceHidden = true;}}, 200);},/*** 選中face*/selectFace: function(e) {var faceName = e.target.getAttribute('text');if (!faceName) {return;}var imgStr = this.getImgByFaceName(faceName);this.$emit('select', {faceName: faceName,imgStr: imgStr}); // 事件上傳// 關閉窗口this.$data.faceHidden = true;},/*** 根據face名稱返回一個img圖片* @param {String} faceName face名稱*/getImgByFaceName: function(faceName) {var imgStr = '<img class="qqemoji small qqemoji@faceIndex" text="@faceName" src="/static/img/im_emoji_spacer.gif"/>';var faceIndex = 0;for (var i = 0; i < this.$data.qqemojiList.length; i++) {if (this.$data.qqemojiList[i] == faceName) {faceIndex = i;break;}}imgStr = imgStr.replace(/@faceIndex/g, faceIndex).replace(/@faceName/g, faceName);return imgStr;}},mounted() {} }; </script><style lang="less"> .common_chat_emoji-wrapper {.iconfont {color: #aaa;font-size: 20px;}.list-wrapper {height: 240px;width: 440px;background-color: #fff;border: 1px solid #e6e6e6;padding: 10px;position: absolute;top: -240px;left: 1px;.list-inner {width: 100%;height: 100%;overflow: hidden;.item {float: left;border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;cursor: pointer;}}} }.common_chat_emoji-wrapper-global {.qqemoji {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('../../../../static/img/qqEmoji.png') 0 0 no-repeat;}.qqemoji.small {vertical-align: middle;height: 24px !important;width: 24px;transform: scale(0.82);margin-top: -5px;margin-left: -3px;}.qqemoji.qqemoji0 {background-position: 0 0;}.qqemoji.qqemoji1 {background-position: -29px 0;}.qqemoji.qqemoji2 {background-position: -58px 0;}.qqemoji.qqemoji3 {background-position: -87px 0;}.qqemoji.qqemoji4 {background-position: -116px 0;}.qqemoji.qqemoji5 {background-position: -145px 0;}.qqemoji.qqemoji6 {background-position: -174px 0;}.qqemoji.qqemoji7 {background-position: -203px 0;}.qqemoji.qqemoji8 {background-position: -232px 0;}.qqemoji.qqemoji9 {background-position: -261px 0;}.qqemoji.qqemoji10 {background-position: -290px 0;}.qqemoji.qqemoji11 {background-position: -319px 0;}.qqemoji.qqemoji12 {background-position: -348px 0;}.qqemoji.qqemoji13 {background-position: -377px 0;}.qqemoji.qqemoji14 {background-position: -406px 0;}.qqemoji.qqemoji15 {background-position: 0 -29px;}.qqemoji.qqemoji16 {background-position: -29px -29px;}.qqemoji.qqemoji17 {background-position: -58px -29px;}.qqemoji.qqemoji18 {background-position: -87px -29px;}.qqemoji.qqemoji19 {background-position: -116px -29px;}.qqemoji.qqemoji20 {background-position: -145px -29px;}.qqemoji.qqemoji21 {background-position: -174px -29px;}.qqemoji.qqemoji22 {background-position: -203px -29px;}.qqemoji.qqemoji23 {background-position: -232px -29px;}.qqemoji.qqemoji24 {background-position: -261px -29px;}.qqemoji.qqemoji25 {background-position: -290px -29px;}.qqemoji.qqemoji26 {background-position: -319px -29px;}.qqemoji.qqemoji27 {background-position: -348px -29px;}.qqemoji.qqemoji28 {background-position: -377px -29px;}.qqemoji.qqemoji29 {background-position: -406px -29px;}.qqemoji.qqemoji30 {background-position: 0 -58px;}.qqemoji.qqemoji31 {background-position: -29px -58px;}.qqemoji.qqemoji32 {background-position: -58px -58px;}.qqemoji.qqemoji33 {background-position: -87px -58px;}.qqemoji.qqemoji34 {background-position: -116px -58px;}.qqemoji.qqemoji35 {background-position: -145px -58px;}.qqemoji.qqemoji36 {background-position: -174px -58px;}.qqemoji.qqemoji37 {background-position: -203px -58px;}.qqemoji.qqemoji38 {background-position: -232px -58px;}.qqemoji.qqemoji39 {background-position: -261px -58px;}.qqemoji.qqemoji40 {background-position: -290px -58px;}.qqemoji.qqemoji41 {background-position: -319px -58px;}.qqemoji.qqemoji42 {background-position: -348px -58px;}.qqemoji.qqemoji43 {background-position: -377px -58px;}.qqemoji.qqemoji44 {background-position: -406px -58px;}.qqemoji.qqemoji45 {background-position: 0 -87px;}.qqemoji.qqemoji46 {background-position: -29px -87px;}.qqemoji.qqemoji47 {background-position: -58px -87px;}.qqemoji.qqemoji48 {background-position: -87px -87px;}.qqemoji.qqemoji49 {background-position: -116px -87px;}.qqemoji.qqemoji50 {background-position: -145px -87px;}.qqemoji.qqemoji51 {background-position: -174px -87px;}.qqemoji.qqemoji52 {background-position: -203px -87px;}.qqemoji.qqemoji53 {background-position: -232px -87px;}.qqemoji.qqemoji54 {background-position: -261px -87px;}.qqemoji.qqemoji55 {background-position: -290px -87px;}.qqemoji.qqemoji56 {background-position: -319px -87px;}.qqemoji.qqemoji57 {background-position: -348px -87px;}.qqemoji.qqemoji58 {background-position: -377px -87px;}.qqemoji.qqemoji59 {background-position: -406px -87px;}.qqemoji.qqemoji60 {background-position: 0 -116px;}.qqemoji.qqemoji61 {background-position: -29px -116px;}.qqemoji.qqemoji62 {background-position: -58px -116px;}.qqemoji.qqemoji63 {background-position: -87px -116px;}.qqemoji.qqemoji64 {background-position: -116px -116px;}.qqemoji.qqemoji65 {background-position: -145px -116px;}.qqemoji.qqemoji66 {background-position: -174px -116px;}.qqemoji.qqemoji67 {background-position: -203px -116px;}.qqemoji.qqemoji68 {background-position: -232px -116px;}.qqemoji.qqemoji69 {background-position: -261px -116px;}.qqemoji.qqemoji70 {background-position: -290px -116px;}.qqemoji.qqemoji71 {background-position: -319px -116px;}.qqemoji.qqemoji72 {background-position: -348px -116px;}.qqemoji.qqemoji73 {background-position: -377px -116px;}.qqemoji.qqemoji74 {background-position: -406px -116px;}.qqemoji.qqemoji75 {background-position: 0 -145px;}.qqemoji.qqemoji76 {background-position: -29px -145px;}.qqemoji.qqemoji77 {background-position: -58px -145px;}.qqemoji.qqemoji78 {background-position: -87px -145px;}.qqemoji.qqemoji79 {background-position: -116px -145px;}.qqemoji.qqemoji80 {background-position: -145px -145px;}.qqemoji.qqemoji81 {background-position: -174px -145px;}.qqemoji.qqemoji82 {background-position: -203px -145px;}.qqemoji.qqemoji83 {background-position: -232px -145px;}.qqemoji.qqemoji84 {background-position: -261px -145px;}.qqemoji.qqemoji85 {background-position: -290px -145px;}.qqemoji.qqemoji86 {background-position: -319px -145px;}.qqemoji.qqemoji87 {background-position: -348px -145px;}.qqemoji.qqemoji88 {background-position: -377px -145px;}.qqemoji.qqemoji89 {background-position: -406px -145px;}.qqemoji.qqemoji90 {background-position: 0 -174px;}.qqemoji.qqemoji91 {background-position: -29px -174px;}.qqemoji.qqemoji92 {background-position: -58px -174px;}.qqemoji.qqemoji93 {background-position: -87px -174px;}.qqemoji.qqemoji94 {background-position: -116px -174px;}.qqemoji.qqemoji95 {background-position: -145px -174px;}.qqemoji.qqemoji96 {background-position: -174px -174px;}.qqemoji.qqemoji97 {background-position: -203px -174px;}.qqemoji.qqemoji98 {background-position: -232px -174px;}.qqemoji.qqemoji99 {background-position: -261px -174px;}.qqemoji.qqemoji100 {background-position: -290px -174px;}.qqemoji.qqemoji101 {background-position: -319px -174px;}.qqemoji.qqemoji102 {background-position: -348px -174px;}.qqemoji.qqemoji103 {background-position: -377px -174px;}.qqemoji.qqemoji104 {background-position: -406px -174px;} } </style><!-- qq表情 --> <!-- <template><div class="common_chat_emoji-wrapper common_chat_emoji-wrapper-global"><i style="font-size: 20px;cursor: pointer;" class="iconfont icon-biaoqing" @click="toggleFaceHidden"></i><div class="list-wrapper" v-show="!faceHidden"><div class="list-inner" @click="selectFace"><a v-for="(item, index) in qqemojiList" :key="index" class="item qqemoji" :title="item" :text="[item]" :class="'qqemoji'+index"></a></div></div><input type="text" id="imLog_qqemoji_txt" @blur="hideFaceWrapper" style="width:0px;height:0px;border: 0px;background-color: #fff;" /></div> </template><script> export default {data() {return {qqemojiList: ['微笑', '撇嘴', '色', '發呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭', '尷尬', '發怒', '調皮', '呲牙', '驚訝', '難過', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饑餓', '困', '驚恐', '流汗', '憨笑', '悠閑', '奮斗', '咒罵', '疑問', '噓', '暈', '瘋了', '衰', '骷髏', '敲打', '再見', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼', '右哼哼', '哈欠', '鄙視', '委屈', '快哭了', '陰險', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒', '籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '嘴唇', '愛心', '心碎', '蛋糕', '閃電', '炸彈', '刀', '足球', '瓢蟲', '便便', '月亮', '太陽', '禮物', '擁抱', '強', '弱', '握手', '勝利', '抱拳', '勾引', '拳頭', '差勁', '愛你', 'NO', 'OK', '愛情', '飛吻', '跳跳', '發抖', '慪火', '轉圈', '磕頭', '回頭', '跳繩', '投降', '激動', '亂舞', '獻吻', '左太極', '右太極'],faceHidden: true,faceNameArray:[]};},methods: {/*** 切換表情界面的顯示*/toggleFaceHidden: function() {this.$data.faceHidden = !this.$data.faceHidden;if (!this.$data.faceHidden) {document.getElementById('imLog_qqemoji_txt').focus();}},/*** 關閉表情窗口*/hideFaceWrapper: function() {var self = this;// 選中face也會隱藏表情窗口，這時判斷是否已經隱藏了setTimeout(function() {if (!self.$data.faceHidden) {self.$data.faceHidden = true;}}, 200);},/*** 選中face*/selectFace: function(e) {var faceName = e.target.getAttribute('text');if (!faceName) {return;}var imgStr = this.getImgByFaceName(faceName);this.faceNameArray.push({faceName: faceName,imgStr: imgStr})this.$emit('select',this.faceNameArray); // 事件上傳this.faceNameArray=[];// this.$emit('select',{// faceName: faceName,// imgStr: imgStr// }); // 事件上傳// 關閉窗口this.$data.faceHidden = true;},/*** 根據face名稱返回一個img圖片* @param {String} faceName face名稱*/getImgByFaceName: function(faceName) {var imgStr = '<img class="qqemoji small qqemoji@faceIndex" text="@faceName" src="/static/img/im_emoji_spacer.gif"/>';var faceIndex = 0;for (var i = 0; i < this.$data.qqemojiList.length; i++) {if (this.$data.qqemojiList[i] == faceName) {faceIndex = i;break;}}imgStr = imgStr.replace(/@faceIndex/g, faceIndex).replace(/@faceName/g, faceName);return imgStr;}},mounted() {} }; </script><style lang="less"> .common_chat_emoji-wrapper {.iconfont {color: #aaa;font-size: 20px;}.list-wrapper {height: 240px;width: 440px;background-color: #fff;border: 1px solid #e6e6e6;padding: 10px;position: absolute;top: -240px;left: 1px;.list-inner {width: 100%;height: 100%;overflow: hidden;.item {float: left;border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;cursor: pointer;}}} }.common_chat_emoji-wrapper-global {.qqemoji {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('../../../../static/img/qqEmoji.png') 0 0 no-repeat;}.qqemoji.small {vertical-align: middle;height: 24px !important;width: 24px;transform: scale(0.82);margin-top: -5px;margin-left: -3px;}.qqemoji.qqemoji0 {background-position: 0 0;}.qqemoji.qqemoji1 {background-position: -29px 0;}.qqemoji.qqemoji2 {background-position: -58px 0;}.qqemoji.qqemoji3 {background-position: -87px 0;}.qqemoji.qqemoji4 {background-position: -116px 0;}.qqemoji.qqemoji5 {background-position: -145px 0;}.qqemoji.qqemoji6 {background-position: -174px 0;}.qqemoji.qqemoji7 {background-position: -203px 0;}.qqemoji.qqemoji8 {background-position: -232px 0;}.qqemoji.qqemoji9 {background-position: -261px 0;}.qqemoji.qqemoji10 {background-position: -290px 0;}.qqemoji.qqemoji11 {background-position: -319px 0;}.qqemoji.qqemoji12 {background-position: -348px 0;}.qqemoji.qqemoji13 {background-position: -377px 0;}.qqemoji.qqemoji14 {background-position: -406px 0;}.qqemoji.qqemoji15 {background-position: 0 -29px;}.qqemoji.qqemoji16 {background-position: -29px -29px;}.qqemoji.qqemoji17 {background-position: -58px -29px;}.qqemoji.qqemoji18 {background-position: -87px -29px;}.qqemoji.qqemoji19 {background-position: -116px -29px;}.qqemoji.qqemoji20 {background-position: -145px -29px;}.qqemoji.qqemoji21 {background-position: -174px -29px;}.qqemoji.qqemoji22 {background-position: -203px -29px;}.qqemoji.qqemoji23 {background-position: -232px -29px;}.qqemoji.qqemoji24 {background-position: -261px -29px;}.qqemoji.qqemoji25 {background-position: -290px -29px;}.qqemoji.qqemoji26 {background-position: -319px -29px;}.qqemoji.qqemoji27 {background-position: -348px -29px;}.qqemoji.qqemoji28 {background-position: -377px -29px;}.qqemoji.qqemoji29 {background-position: -406px -29px;}.qqemoji.qqemoji30 {background-position: 0 -58px;}.qqemoji.qqemoji31 {background-position: -29px -58px;}.qqemoji.qqemoji32 {background-position: -58px -58px;}.qqemoji.qqemoji33 {background-position: -87px -58px;}.qqemoji.qqemoji34 {background-position: -116px -58px;}.qqemoji.qqemoji35 {background-position: -145px -58px;}.qqemoji.qqemoji36 {background-position: -174px -58px;}.qqemoji.qqemoji37 {background-position: -203px -58px;}.qqemoji.qqemoji38 {background-position: -232px -58px;}.qqemoji.qqemoji39 {background-position: -261px -58px;}.qqemoji.qqemoji40 {background-position: -290px -58px;}.qqemoji.qqemoji41 {background-position: -319px -58px;}.qqemoji.qqemoji42 {background-position: -348px -58px;}.qqemoji.qqemoji43 {background-position: -377px -58px;}.qqemoji.qqemoji44 {background-position: -406px -58px;}.qqemoji.qqemoji45 {background-position: 0 -87px;}.qqemoji.qqemoji46 {background-position: -29px -87px;}.qqemoji.qqemoji47 {background-position: -58px -87px;}.qqemoji.qqemoji48 {background-position: -87px -87px;}.qqemoji.qqemoji49 {background-position: -116px -87px;}.qqemoji.qqemoji50 {background-position: -145px -87px;}.qqemoji.qqemoji51 {background-position: -174px -87px;}.qqemoji.qqemoji52 {background-position: -203px -87px;}.qqemoji.qqemoji53 {background-position: -232px -87px;}.qqemoji.qqemoji54 {background-position: -261px -87px;}.qqemoji.qqemoji55 {background-position: -290px -87px;}.qqemoji.qqemoji56 {background-position: -319px -87px;}.qqemoji.qqemoji57 {background-position: -348px -87px;}.qqemoji.qqemoji58 {background-position: -377px -87px;}.qqemoji.qqemoji59 {background-position: -406px -87px;}.qqemoji.qqemoji60 {background-position: 0 -116px;}.qqemoji.qqemoji61 {background-position: -29px -116px;}.qqemoji.qqemoji62 {background-position: -58px -116px;}.qqemoji.qqemoji63 {background-position: -87px -116px;}.qqemoji.qqemoji64 {background-position: -116px -116px;}.qqemoji.qqemoji65 {background-position: -145px -116px;}.qqemoji.qqemoji66 {background-position: -174px -116px;}.qqemoji.qqemoji67 {background-position: -203px -116px;}.qqemoji.qqemoji68 {background-position: -232px -116px;}.qqemoji.qqemoji69 {background-position: -261px -116px;}.qqemoji.qqemoji70 {background-position: -290px -116px;}.qqemoji.qqemoji71 {background-position: -319px -116px;}.qqemoji.qqemoji72 {background-position: -348px -116px;}.qqemoji.qqemoji73 {background-position: -377px -116px;}.qqemoji.qqemoji74 {background-position: -406px -116px;}.qqemoji.qqemoji75 {background-position: 0 -145px;}.qqemoji.qqemoji76 {background-position: -29px -145px;}.qqemoji.qqemoji77 {background-position: -58px -145px;}.qqemoji.qqemoji78 {background-position: -87px -145px;}.qqemoji.qqemoji79 {background-position: -116px -145px;}.qqemoji.qqemoji80 {background-position: -145px -145px;}.qqemoji.qqemoji81 {background-position: -174px -145px;}.qqemoji.qqemoji82 {background-position: -203px -145px;}.qqemoji.qqemoji83 {background-position: -232px -145px;}.qqemoji.qqemoji84 {background-position: -261px -145px;}.qqemoji.qqemoji85 {background-position: -290px -145px;}.qqemoji.qqemoji86 {background-position: -319px -145px;}.qqemoji.qqemoji87 {background-position: -348px -145px;}.qqemoji.qqemoji88 {background-position: -377px -145px;}.qqemoji.qqemoji89 {background-position: -406px -145px;}.qqemoji.qqemoji90 {background-position: 0 -174px;}.qqemoji.qqemoji91 {background-position: -29px -174px;}.qqemoji.qqemoji92 {background-position: -58px -174px;}.qqemoji.qqemoji93 {background-position: -87px -174px;}.qqemoji.qqemoji94 {background-position: -116px -174px;}.qqemoji.qqemoji95 {background-position: -145px -174px;}.qqemoji.qqemoji96 {background-position: -174px -174px;}.qqemoji.qqemoji97 {background-position: -203px -174px;}.qqemoji.qqemoji98 {background-position: -232px -174px;}.qqemoji.qqemoji99 {background-position: -261px -174px;}.qqemoji.qqemoji100 {background-position: -290px -174px;}.qqemoji.qqemoji101 {background-position: -319px -174px;}.qqemoji.qqemoji102 {background-position: -348px -174px;}.qqemoji.qqemoji103 {background-position: -377px -174px;}.qqemoji.qqemoji104 {background-position: -406px -174px;} } </style>-->

那張圖片，另存為就行

最后一步，發送（重點）
表情和文字存入的格式為（你好[哈哈][微笑]）

sendText(currectId){//htmlStr就是獲取到輸入框的內容var htmlStr = document.getElementById('common_chat_input').innerHTML;//通過正則匹配顯示出文字，表情var tmpInputContent = htmlStr.replace(/<img .+?text=\"(.+?)\".+?>/g, '[$1]').replace(/<.+?>/g, '');},

有什么不懂得可以留言

總結

以上是生活随笔為你收集整理的vue websocket 聊天之发送表情的全部內容，希望文章能夠幫你解決所遇到的問題。

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