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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供府谷企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為府谷眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

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

 

實(shí)現(xiàn)思路

• 利用 div 的 contenteditable 屬性,讓div可編輯

• 綁定 ref 屬性，用于操作輸入框元素

• 圖片點(diǎn)擊時(shí)，獲取圖片地址，使用require轉(zhuǎn)換圖片地址

• 創(chuàng)建img標(biāo)簽，賦值轉(zhuǎn)換好的圖片地址

• 從 refs 對(duì)象中獲取到輸入框元素，賦值創(chuàng)建好的img標(biāo)簽

實(shí)現(xiàn)過(guò)程

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

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

表情輸入框綁定對(duì)應(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>

實(shí)現(xiàn)表情框圖片點(diǎ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實(shí)現(xiàn)圖片與文字混輸效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：怎么使用Vue實(shí)現(xiàn)圖片與文字混輸效果
URL分享：http://sd-ha.com/article8/ggscip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)、虛擬主機(jī)、面包屑導(dǎo)航、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)