Vue实现图片与文字混输效果


Posted in Javascript onDecember 04, 2019

本文转自:https://juejin.im/post/5de26d39e51d455da17be1e3

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用 textarea 实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了 掘金 的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享。先给大家展示下最后实现的效果:yum:

Vue实现图片与文字混输效果 

实现思路

  • 利用 div 的 contenteditable 属性,让div可编辑
  • 绑定 ref 属性,用于操作输入框元素
  • 图片点击时,获取图片地址,使用require转换图片地址
  • 创建img标签,赋值转换好的图片地址
  • 从 refs 对象中获取到输入框元素,赋值创建好的img标签

实现过程

声明div可编辑,监听回车键事件,关闭拼写检查,绑定ref方便获取当前元素

<div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)"
  contenteditable="true" spellcheck="false"></div>

表情输入框绑定对应的事件

<div class="item-panel" v-for="item in this.emojiList" :key="item.info">
 <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info"
   @mouseover="emojiConversion($event,'over',item.src,item.hover,item.info)"
   @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)"
   @click="emojiConversion($event,'click',item.src,item.hover,item.info)">
</div>

实现表情框图片点击事件

emojiConversion: function (event, status, path, hoverPath, info) {
 if (status === "over") {
  event.target.src = require(`../assets/img/emoji/${hoverPath}`);
 } else if (status === "click") {
  console.log(hoverPath);
  // 表情输入
  const imgSrc = require(`../assets/img/emoji/${hoverPath}`);
  const imgTag = document.createElement("img");
  imgTag.src = imgSrc;
  imgTag.alt = info;
  this.$refs.msgInputContainer.appendChild(imgTag);
 } else {
  event.target.src = require(`../assets/img/emoji/${path}`);
 }
}

总结

以上所述是小编给大家介绍的Vue实现图片与文字混输效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
js验证上传图片的方法
May 12 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
前端jquery部分很精彩
May 03 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
JS实现的雪花飘落特效示例
Dec 03 #Javascript
vue中实现高德定位功能
Dec 03 #Javascript
You might like
php实现图片等比例缩放代码
2015/07/23 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python中的全局变量如何理解
2020/06/04 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
总经理岗位职责范本
2014/02/02 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
教师考察材料范文
2014/06/03 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
部队2014年终工作总结
2014/11/27 职场文书
手术室护士个人总结
2015/02/13 职场文书
学校国庆节活动总结
2015/03/23 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers