生活随笔
收集整理的這篇文章主要介紹了
vue websocket 聊天之发送表情
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
萬事開頭難，第一次接觸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
},getqqemojiEmoji
: function(value
) {if (value
== undefined
) {return;}var self
= this;return value
.replace(/\[(.+?)\]/g, function(item
, value
) {return self
.$refs
.qqemoji
.getImgByFaceName(value
);});},rs
.imgStr（打印出來就是 img標簽）qqemoji_selectFace
: function(rs
) {$("#common_chat_input").append(rs
.imgStr
);},
//表情組件(新建vue文件，名字common_chat_emoji.vue)
注意：css里有個圖片路徑，記得改你自己的
<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;setTimeout(function() {if (!self.$data.faceHidden) {self.$data.faceHidden = true;}}, 200);},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;},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
){var htmlStr
= document
.getElementById('common_chat_input').innerHTML
;var tmpInputContent
= htmlStr
.replace(/<img .+?text=\"(.+?)\".+?>/g, '[$1]').replace(/<.+?>/g, '');},
有什么不懂得可以留言
總結
以上是生活随笔為你收集整理的vue websocket 聊天之发送表情的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
