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)聽回車鍵事件，關閉拼寫檢查，綁定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>
實現(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)載，煩請注明出處，謝謝！
相關文章
本篇文章主要介紹了vue使用Axios做ajax請求詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue項目如何部署到SpringBoot工程下問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關于vue升降版本以及如何查看項目版本的相關資料,在開發(fā)和維護Vue.js應用程序時了解所使用的Vue.js版本非常重要,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關于vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析
在本篇文章里小編給大家整理的是一篇關于Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析內(nèi)容，有需要的朋友們可以跟著學習參考下。2021-11-11
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
使用Vue.js和Flask來構(gòu)建一個單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個單頁的App的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue3 實現(xiàn)牙位圖選擇器的實例代碼,代碼簡單易懂,需要的朋友參考下吧2025-04-04
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實例形式分析了vue.js基于v-on事件綁定響應鼠標點擊相關操作技巧,需要的朋友可以參考下2018-07-07
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07