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;
    }
}

以此类推每个都写上。