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

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

实现思路

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

您可能感兴趣的文章:

• vue与原生app的对接交互的方法(混合开发)
• Vue中的混入的使用(vue mixins)
• 详解Vue.js Mixins 混入使用
• 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令