万事开头难，第一次接触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">
                    这个是输入框（重点）
                        **<div
                            maxlength="500"
                            class="inputContent common_chat_emoji-wrapper-global"
                            id="common_chat_input"
                            contenteditable="true"
                        ></div>
                    </div>**
                    
                    <!-- 发送按钮 -->
                    <el-button
                        type="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, '');
         
      },

有什么不懂得可以留言

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue