前言

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

实现思路

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

实现过程

声明div可编辑，监听回车键事件，关闭拼写检查，绑定ref方便获取当前元素<div class="input-panel" ref="msgInputContainer"

<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">

<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}`);
  }
}

踩坑记录

直接使用append()方法

公司项目一直用JQuery，类似的需求直接append，以为是js提供的方法，结果这里直接使用，答案很明显，直接将DOM字符串插入了输入框里🤣

手动实现字符串转dom

自己手动实现，不知道是不是自己写错了，结果也是行不通，如果有发现错误的朋友，欢迎评论区留言。

正确的实现方法

使用document.createElement创建img元素，然后使用js提供的src方法和alt方法直接赋值，使用appendChild赋值创建好的img元素。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对IIS7站长之家的支持。