好资源导航 » 文章资讯 » Vue实现图片与文字混输效果

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

2023-08-05 01:05:03 89

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

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

实现思路

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

实现过程

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

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

实现表情框图片点击事件

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

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐