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

小編給大家分享一下怎么使用Vue實現(xiàn)圖片與文字混輸效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

用多了 JQuery ，習(xí)慣了使用JQuery的API操作 DOM ，幾乎忘記了原生JS對DOM操作，今天在項目中遇到了文字和圖片混輸?shù)那闆r，第一個想到的辦法是用 textarea 實現(xiàn)，結(jié)果發(fā)現(xiàn)實現(xiàn)不了圖片輸入，然后想著找個富文本編輯器的插件實現(xiàn)，深思熟慮之后，我的需求好像也沒那么復(fù)雜，不至于引用個插件，看了 掘金 的發(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方便獲取當(dāng)前元素

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

以上是“怎么使用Vue實現(xiàn)圖片與文字混輸效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！