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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
vue接口请求加密实例
Aug 11 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php字符串操作常见问题小结
2016/10/11 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python常见字典内建函数用法示例
2018/05/14 Python
对python:print打印时加u的含义详解
2018/12/15 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python 硬币兑换问题
2019/07/29 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
我的老师教学反思
2014/05/01 职场文书
鉴定评语大全
2014/05/05 职场文书
服务理念口号
2014/06/11 职场文书
孔庙导游词
2015/02/04 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
python开发飞机大战游戏
2021/07/15 Python