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的关于动态创建DOM元素的问题
Dec 24 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
详解vue几种主动刷新的方法总结
Feb 19 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
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
什么是GWT的Module
2013/01/20 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
海南地接欢迎词
2014/01/14 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Linux安装apache服务器的配置过程
2021/11/27 Servers
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL