Vue實(shí)現(xiàn)圖片與文字混輸效果
本文轉(zhuǎn)自：https://juejin.im/post/5de26d39e51d455da17be1e3
用多了 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}`);
}
}
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)圖片與文字混輸效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
優(yōu)雅的處理vue項(xiàng)目異常實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項(xiàng)目異常的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
VueJS組件之間通過(guò)props交互及驗(yàn)證的方式
本篇文章主要介紹了VueJS組件之間通過(guò)props交互及驗(yàn)證的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-09-09
Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
這篇文章主要介紹了vue多次循環(huán)操作,結(jié)合實(shí)例形式分析了vue.js針對(duì)json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用問(wèn)題
這篇文章主要介紹了Vue3?封裝擴(kuò)展并簡(jiǎn)化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
vue樹(shù)形結(jié)構(gòu)數(shù)據(jù)處理的方法總結(jié)
在項(xiàng)目開(kāi)發(fā)的過(guò)程中,會(huì)經(jīng)常使用樹(shù)形結(jié)構(gòu)數(shù)據(jù),前后端交互都會(huì)對(duì)數(shù)據(jù)進(jìn)行處理,后端返回的數(shù)據(jù)前端有的時(shí)候不能直接使用需要轉(zhuǎn)換,本文小編整理了一些項(xiàng)目中用到的處理方法,需要的朋友可以參考下2023-11-11
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10
解決Vue項(xiàng)目Network:?unavailable的問(wèn)題
項(xiàng)目只能通過(guò)Local訪問(wèn)而不能通過(guò)Network訪問(wèn),本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06