一般情况下，发送消息，上传文件、图片都是使用 input 来实现，但是产品的功能千变万化，现实中也会有不尽人意的时候
下方使用了element中的input 绑定Enter事件发送消息，但是有个功能点是文章来源：https://www.toymoban.com/news/detail-610179.html
<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属性。文章来源地址https://www.toymoban.com/news/detail-610179.html
<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;
}到了这里，关于关于聊天功能，使用input发送消息，不能在input中显示图片解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
