网站建设番禺交互网站开发

一般情况下，发送消息，上传文件、图片都是使用 input 来实现，但是产品的功能千变万化，现实中也会有不尽人意的时候

下方使用了element中的input 绑定Enter事件发送消息，但是有个功能点是

 <el-input type="textarea" class="talk-textarea"v-if="!uploadImgUrl"v-model="message"placeholder="请输入您要咨询的问题......"@keydown.enter.native="enterFun($event)"></el-input>

用户需要发送图片，这时这个输入框就不能显示图片了，这时改用div进行消息输入,使用contentEditable=true，可以了解一个这个contentEditable属性。

<div class="edit-div" id="cont" contentEditable=true@keydown.enter="enterFun($event)">/***改div样式***/
.edit-div{padding: 10px 18px;height: 75px;overflow: auto;outline: none;
}
.edit-div[contenteditable]:empty:before{content: '输入聊天信息，按Enter键快速发送......';color: #CCCCCC;
}
.edit-div[contenteditable]:focus{content:none;
}