关于聊天功能，使用input发送消息，不能在input中显示图片解决办法

最新推荐文章于 2024-08-24 10:07:07 发布

Adamyworld

最新推荐文章于 2024-08-24 10:07:07 发布

阅读量559

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zhouhx123/article/details/112956165

版权

一般情况下，发送消息，上传文件、图片都是使用 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;
}