Vue 表情包輸入組件的實(shí)現(xiàn)代碼
Emotion
一個(gè)用于vue的表情輸入組件
https://gitee.com/jiangliyue/vue_expression_input_module
index是使用示例,emotion是組件代碼(這里用的是微信表情包的地址,大家可根據(jù)需要修改)
下載安裝啟動(dòng)項(xiàng)目查看效果
npm install npm run dev
Emotion文件夾下Emotion文件說(shuō)明
實(shí)現(xiàn)原理是根據(jù)字段對(duì)在線表情包圖片進(jìn)行匹配替換
代碼中 img 標(biāo)簽的地址即為表情圖片地址,可自己根據(jù)需求替換
mounted () { const name = this.$el.innerHTML const list = ['微笑', '撇嘴', '色', '發(fā)呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭', '尷尬', '發(fā)怒', '調(diào)皮', '呲牙', '驚訝', '難過(guò)', '酷', '冷汗', '抓狂', '吐', '偷笑', '可愛(ài)', '白眼', '傲慢', '饑餓', '困', '驚恐', '流汗', '憨笑', '大兵', '奮斗', '咒罵', '疑問(wèn)', '噓', '暈', '折磨', '衰', '骷髏', '敲打', '再見(jiàn)', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼', '右哼哼', '哈欠', '鄙視', '快哭了', '陰險(xiǎn)', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒', '籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '示愛(ài)', '愛(ài)心', '心碎', '蛋糕', '閃電', '足球', '瓢蟲', '便便', '月亮', '太陽(yáng)', '禮物', '擁抱', '強(qiáng)', '弱', '握手', '勝利', '抱拳', '勾引', '拳頭', '差勁', '愛(ài)你', 'NO', 'OK', '愛(ài)情', '飛吻', '跳跳', '發(fā)抖', '慪火', '轉(zhuǎn)圈', '磕頭', '回頭', '跳繩', '揮手', '激動(dòng)', '街舞', '獻(xiàn)吻', '左太極', '右太極'] let index = list.indexOf(name) let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">` this.$nextTick(() => { this.$el.innerHTML = imgHTML }) },
Emotion文件夾下index文件說(shuō)明
通過(guò)循環(huán)列表生成表情包選擇框
<div class="emotion-box-line" v-for="(line, i) in list" :key="i" > <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion> </div>
最后需要注意的是表情包評(píng)論后保存到后臺(tái)的是相關(guān)字符串,展示時(shí)需要還原成圖片,具體方法可參考index文件,我這里用了正則匹配轉(zhuǎn)化,還是比較方便的
<div class="text-place"> <!-- /\#[\u4E00-\u9FA5]{1,3}\;/gi 匹配出含 #XXX; 的字段 --> <p v-html="content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p> </div>
就這么簡(jiǎn)單,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目從node8.x升級(jí)到12.x后的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目從node8.x升級(jí)到12.x后的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01在項(xiàng)目中封裝axios的實(shí)戰(zhàn)過(guò)程
這篇文章主要給大家介紹了關(guān)于如何在項(xiàng)目中封裝axios的相關(guān)資料,axios 請(qǐng)求的封裝,無(wú)非是為了方便代碼管理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09vue cli3.0 引入eslint 結(jié)合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結(jié)合vscode使用,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05教你三分鐘掌握Vue過(guò)濾器filters及時(shí)間戳轉(zhuǎn)換
這篇文章教你三分鐘掌握Vue過(guò)濾器filters及時(shí)間戳轉(zhuǎn)換,本文將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,需要的朋友可以參考下2023-03-03Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決
這篇文章主要介紹了Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07