表情包组件(vue)
其實很早都想在博客的留言和評論處使用表情包,奈何博客需要完善的地方太多。于是一直推到了這幾天,具體實現效果在博客上可以看到。
在網上查了下,發現微信官方的表情包對外開放。具體規則想如下,于是就有了思路
var EmotionList = ['微笑', '撇嘴', '色'];//改數組沒有寫完全 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif">//微笑對應的動圖 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif">//撇嘴對應的動圖 <img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif">//色對應的動圖我的思路是將表情包組件做成一個子組件,在需要使用表情包的父組件里使用。
首先父組件的input周圍,比如留言框后會有個表情包彈框按鈕。點擊該按鈕會彈出表情包彈框,選擇表情后彈框關閉,留言框中追加進表情文字,如[[微笑]]。在form submit時,正則匹配出textarea里的像’[[微笑]]'這些字段,替換成<img https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif>,然后正常上傳后端接口即可。最后前端展示留言的列表展示留言文本為html格式即可。
具體子父組件間交互是這樣的。當父組件點擊表情彈框按鈕時,父組件通過Dom直接操作子組件屬性,使表情彈框彈出。選擇好某個表情后,表情彈框關閉,這半步在子組件內部可直接操作,無需子父交互。選中表情關閉彈框的同時還要通知父組件(emit)將選中表情的漢字追加在輸入框中。最終父組件提交輸入框內容時,正則匹配替換漢字表情為gif動圖標簽即可。
具體代碼如下:
子組件(表情包)代碼如下:
父組件使用如下:
<template>/*表情彈框打開按鈕*/<span class="EmotionButton" @click="OpenEmotions()"><i class="iconfont icon-face IconfontSize"></i></span><Emotion ref="EmotionB" @AppendInputValue="AppendMessageText"></Emotion> </template>export default {name: "BlogDetail",methods:{// 打開表情包彈框OpenEmotions:function () {this.$refs.EmotionB.OpenEmotion(true);},//表情選中后追加在inputAppendMessageText:function (EmotionChinese) {this.ArticleCommentText += EmotionChinese;}} }效果演示地址:點擊留言框展示入口
代碼詳見github:博客Github
總結
以上是生活随笔為你收集整理的表情包组件(vue)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: web页面跳转微信小程序
- 下一篇: vue prop属性使用方法