宜宾网站建设公司

怎么使用Vue实现图片与文字混输效果

小编给大家分享一下怎么使用Vue实现图片与文字混输效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司是一家专业提供府谷企业网站建设,专注与网站设计、成都网站建设、HTML5、小程序制作等业务。10年已为府谷众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

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

怎么使用Vue实现图片与文字混输效果 

实现思路

  • 利用 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}`);
 } 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实现图片与文字混输效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享名称：怎么使用Vue实现图片与文字混输效果
链接地址：http://ybzwz.com/article/ggscip.html

其他资讯