Emotion

One for vue Expression input component of
https://gitee.com/jiangliyue/vue_expression_input_module.git
<https://gitee.com/jiangliyue/vue_expression_input_module.git>

index Is a usage example ,emotion Is the component code ( Here is the address of wechat expression pack , You can modify it according to your needs )

Download and install the startup project to view the effect

npm install

npm run dev



Emotion Under folder Emotion Document description

The implementation principle is to match and replace the online expression pack images according to the fields
In code img The address of the tag is the address of the expression picture , It can be replaced according to the demand
mounted () { const name = this.$el.innerHTML const list = [' smile ', ' Mouth curling ', ' colour ',
' In a daze ', ' proud ', ' shed tears ', ' Shyness ', ' shut up ', ' sleep ', ' Crying ', ' awkward ', ' Get angry ', ' naughty ', ' open the mouth and show the teeth ', ' surprised ', ' Sad ', ' Cool '
,' Cold sweat ', ' Madness ', ' spit ', ' Snicker ', ' lovely ', ' roll one's eyes ', ' arrogant ', ' hunger ', ' sleepy ', ' terrified ', ' Sweating ', ' Smirk ', ' Soldier ',
' struggle ', ' Curse ', ' doubt ', ' Shh ', ' halo ', ' torment ', ' decline ', ' human skeleton ', ' Knock ', ' bye ', ' Wipe sweat ', ' Picking nose ', ' applause ', ' It's embarrassing '
,' A bad laugh ', ' Left hem ', ' Right hem ', ' Yawn ', ' despise ', ' Grievance ', ' I'm going to cry ', ' Sinister ', ' kiss ', ' scare ', ' poor ', ' kitchen knife ', ' watermelon ',
' Beer ', ' Basketball ', ' Table tennis ', ' Coffee ', ' meal ', ' pighead ', ' rose ', ' fade ', ' Show love ', ' love ', ' heart-broken ', ' Cake ', ' lightning ',
' bomb ', ' knife ', ' Football ', ' Ladybug ', ' Poop ', ' moon ', ' sunlight ', ' gift ', ' embrace ', ' strong ', ' weak ', ' handshake ', ' victory ', ' Boxing ',
' Seduction ', ' fist ', ' Bad ', ' love you ', 'NO', 'OK', ' love ', ' blow a kiss ', ' Jump ', ' tremble ', ' A fire ', ' Turn around ', ' Kowtow ',
' come back ', ' Rope skipping ', ' wave ', ' Excited ', ' Hip hop ', ' Offer a kiss ', ' Zuo Taiji ', ' Right Taiji '] 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 Under folder index Document description

Generating emoticon package selection box through loop list
<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>
Finally, it should be noted that the related string is saved to the background after the expression package comments , The display needs to be restored to pictures , Specific methods can be referred to index file , I use regular matching transformation here , It's more convenient
<div class="text-place"> <!-- /\#[\u4E00-\u9FA5]{1,3}\;/gi Matching out the content #XXX; Fields for --> <
p v-html="content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p> </div>
That's it , I hope I can help children's shoes in need ( ̄▽ ̄)