当前位置: 首页 > news >正文

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

一般情况下,发送消息,上传文件、图片都是使用 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;
}
http://www.lryc.cn/news/98218.html

相关文章:

  • SQL语句(三十二)
  • ffmpeg-aresample_swr_opts的解析
  • PX4从放弃到精通(二十九):传感器冗余机制
  • vue 设置数组
  • 9.NIO非阻塞式网络通信入门
  • QT基于TCP协议实现数据传输以及波形绘制
  • 苹果safari浏览器播放不了video标签视频
  • 【粒子群算法和蝴蝶算法组合】粒子群混沌混合蝴蝶优化算法研究(Matlab代码实现)
  • Java设计模式之单例模式详解(懒汉式和饿汉式)
  • 软件测试基本知识
  • Vue项目中强制刷新页面的方法
  • 文件按关键字分组-切割-染色-写入excel
  • 爬虫的基本原理:爬虫概述及爬取过程
  • cocos2D插件转3D插件
  • [Angular] 主从表结构,从表记录在主表固定栏位上呈现
  • Kotlin Multiplatform 创建多平台分发库
  • [SQL挖掘机] - union/union all 使用注意事项
  • php 单例模式
  • 【数据结构】实验二:顺序表
  • 【高级数据结构】线段树
  • qt简易闹钟
  • python和c加加有什么区别,c和c++和python先学哪个
  • Visual Studio 2022 cmake配置opencv开发环境
  • C++ GDAL找出多时相遥感影像缺失的日期并自动生成新的全零图像作为替补
  • 【AI底层逻辑】——篇章5(下):机器学习算法之聚类降维时间序列
  • P1980 [NOIP2013 普及组] 计数问题
  • 需求管理全过程流程图及各阶段核心关注点详解
  • Android开源 自定义emoji键盘,EmojiPack v2.1版本
  • SOLIDWORKS软件的优势分析 硕迪科技
  • Android性能优化之游戏的Theme背景图