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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
js继承的实现代码
Aug 05 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
环形加载进度条封装(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的autoload机制的实现解析
2012/09/15 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python添加菜单图文讲解
2019/06/04 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
试用期解除劳动合同通知书
2015/04/16 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
新闻稿标题
2015/07/18 职场文书
2019年最新借条范本!
2019/07/08 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Python面试不修改数组找出重复的数字
2022/05/20 Python