vue 评论框里面输入Emoji表情

contenteditable 属性是 HTML5新增的。所有主流浏览器都支持 contenteditable 属性。div设置contenteditable=“true”，即可对其进行编辑。

    <div placeholder="写评论..." ref="inputs" @input="changeBtnClick" @focus="focusCustomerMessage" @blur="blurCustomerMessage" contenteditable class="pingluninput pingluninputbox"></div>

给div设置一个placeholder属性，可以自行改变颜色。

div[contenteditable]:empty:before {
    content: attr(placeholder);
    color: #666666;
}
div[contenteditable]:focus {
    content: none;
}

自动获取焦点

this.$nextTick(() => {
	this.$refs.inputs.focus()
})

设置光标在最后的位置

this.$nextTick(() => {
        if (window.getSelection) { //ie11 10 9 ff safari
        	this.$refs.inputs.focus(); //解决ff不获取焦点无法定位问题
            	var range = window.getSelection(); //创建range
                    range.selectAllChildren(this.$refs.inputs); //range 选择 this.$refs.inputs下所有子内容
                    range.collapseToEnd(); //光标移至最后
                } else if (document.selection) { //ie10 9 8 7 6 5
                    var range = document.selection.createRange(); //创建选择对象
                    range.moveToElementText(this.$refs.inputs); //range定位到 this.$refs.inputs
                    range.collapse(false); //光标移至最后
                    range.select();
                }
            })

给每个图片进行排版

   <div class="biaoqing" v-show="emailShow">
                <ul>
                    <div>
                        <li @click="biaoQing('哈哈')"><img class="biaoq" src="../../assets/images/haha.png" data-alias="哈哈" /></li>
                        <li @click="biaoQing('笑哭')"><img class="biaoq" src="../../assets/images/aiku.png" data-alias="笑哭" /></li>
                        <li @click="biaoQing('奸诈')"><img class="biaoq" src="../../assets/images/jianzha.png" data-alias="奸诈" /></li>
                        <li @click="biaoQing('难过')"><img class="biaoq" src="../../assets/images/nanguo.png" data-alias="难过" /></li>
                        <li @click="biaoQing('色')"><img class="biaoq" src="../../assets/images/se.png" data-alias="色" /></li>
                        <li @click="biaoQing('捂脸')"><img class="biaoq" src="../../assets/images/wulian.png" data-alias="捂脸" /></li>
                        <li @click="biaoQing('皱眉')"><img class="biaoq" src="../../assets/images/zhoumei.png" data-alias="皱眉" /></li>
                    </div>

                    <div>
                        <li @click="biaoQing('发呆')"><img class="biaoq" src="../../assets/images/fadai.png" data-alias="发呆" /></li>
                        <li @click="biaoQing('坏笑')"><img class="biaoq" src="../../assets/images/huaixiao.png" data-alias="坏笑" /></li>
                        <li @click="biaoQing('委屈')"><img class="biaoq" src="../../assets/images/weiqu.png" data-alias="委屈" /></li>
                        <li @click="biaoQing('可爱')"><img class="biaoq" src="../../assets/images/keai.png" data-alias="可爱" /></li>
                        <li @click="biaoQing('爱心')"><img class="biaoq" src="../../assets/images/aixin.png" data-alias="爱心" /></li>
                        <li @click="biaoQing('赞')"><img class="biaoq" src="../../assets/images/zan.png" data-alias="赞" /></li>
                        <li><img class="back" @click="goBack" src="../../assets/images/back.png" /></li>
                    </div>
                </ul>
            </div>

biaoQing (val) {
      switch (val) {
         case '哈哈':
            this.$refs.inputs.innerHTML += `<img style='width:0.6rem' src='${require('../../assets/images/haha.png')}'/>`
            break;
    }
}

以此类推每个都写上。