快捷導航

Vue實現(xiàn)圖片與文字混輸效果

更新時間：2019年12月04日 08:43:54 作者：神奇的程序員

用多了 JQuery ，習慣了使用JQuery的API操作 DOM ，幾乎忘記了原生JS對DOM操作，今天在項目中遇到了文字和圖片混輸?shù)那闆r，小編給大家分享Vue實現(xiàn)圖片與文字混輸效果，感興趣的朋友一起看看吧

本文轉(zhuǎn)自：https://juejin.im/post/5de26d39e51d455da17be1e3

用多了 JQuery ，習慣了使用JQuery的API操作 DOM ，幾乎忘記了原生JS對DOM操作，今天在項目中遇到了文字和圖片混輸?shù)那闆r，第一個想到的辦法是用 textarea 實現(xiàn)，結(jié)果發(fā)現(xiàn)實現(xiàn)不了圖片輸入，然后想著找個富文本編輯器的插件實現(xiàn)，深思熟慮之后，我的需求好像也沒那么復雜，不至于引用個插件，看了掘金的發(fā)布沸點功能，然后就模仿了其作法，于是就有了這篇文章的分享。先給大家展示下最后實現(xiàn)的效果:yum:

實現(xiàn)思路

利用 div 的 contenteditable 屬性,讓div可編輯
綁定 ref 屬性，用于操作輸入框元素
圖片點擊時，獲取圖片地址，使用require轉(zhuǎn)換圖片地址
創(chuàng)建img標簽，賦值轉(zhuǎn)換好的圖片地址
從 refs 對象中獲取到輸入框元素，賦值創(chuàng)建好的img標簽

實現(xiàn)過程

聲明div可編輯，監(jiān)聽回車鍵事件，關(guān)閉拼寫檢查，綁定ref方便獲取當前元素

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

表情輸入框綁定對應(yīng)的事件

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

實現(xiàn)表情框圖片點擊事件

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

總結(jié)

以上所述是小編給大家介紹的Vue實現(xiàn)圖片與文字混輸效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: