用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,小编给大家分享Vue实现图片与文字混输效果,感兴趣的朋友一起看看吧

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

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

 

实现思路

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

实现过程

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

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

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

<div 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实现图片与文字混输效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
瑞幸开盘暴跌80.95%,此前承认虚假交易约22亿元

瑞幸开盘暴跌80.95%,此

瑞幸咖啡开盘,
瑞幸:正评估先前发布的财务状况和做出其他可能调整

瑞幸:正评估先前发布的

瑞幸咖啡称,公司正在评估不当行为对其财务报表的整体财
否认业绩造假两个月之后 瑞幸承认虚假交易22亿元

否认业绩造假两个月之

继此前否认浑水的造假指控之后,瑞幸官方今日发布公告,承
瑞幸咖啡报告财报审计问题:伪造交易价值约22亿元

瑞幸咖啡报告财报审计

瑞幸咖啡(Nasdaq:LK)今日宣布,公司董事会已成了一个特别
瑞幸咖啡盘前跌逾50% 调查称伪造交易价值大约22亿元

瑞幸咖啡盘前跌逾50%

瑞幸咖啡盘前跌逾50%,公司公布调查显示伪造交易价值大
瑞幸咖啡盘前跌逾80% 调查显示伪造交易价值约22亿元

瑞幸咖啡盘前跌逾80%

瑞幸咖啡盘前大幅跳水,跌逾80%,公司内部调查此初步阶段
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大