表情包组件(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><div class="EmoticonListCover" v-if="Show" @click="OpenEmotion(false)"><div class="EmoticonList"><div class="PicItem" v-for="(item,i) in EmotionList" @click="ClickEmoticon(i)" :key="i"><img :src=" 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' + i + '.gif'"></div></div></div>
</template><script>export default {name: "Emotion",data:function(){return {Show:false,EmotionList:['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭','尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱','白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘','晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼','右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒','篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹','刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引','拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手','激动', '街舞', '献吻', '左太极', '右太极'],}},methods:{//选中表情ClickEmoticon:function (EmoticonNo) {var That = this;That.Show = false;That.$emit('AppendInputValue','[[' + That.EmotionList[EmoticonNo] + ']]');},OpenEmotion:function (Value) {this.Show = Value;}}}
</script>

父组件使用如下：

<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)相关推荐

vue如何掌控表情包
因为项目需要,在网上找了很多表情包的开源代码,可能是由于每个开源代码都是基于不同场景下写出来的,对使用者来说,不是那么透明,今天我分享一个简单实用的表情包代码如何在Vue里制作一个表情包组件 1.下 ...
vue 使用emoji表情包
1.前端页面 vue <template><div class="test"><div v-show="show" :class= ...
基于QT的【第一个项目】设计+所有组件配合使用+网络编程局域网通信+文件IO操作+登录界面和头像+多界面跳转+JSON数据解析+表情包制作
基于QT的第一个项目+所有组件配合使用+网络编程局域网通信+文件IO操作+登录界面和头像+多界面跳转+JSON数据解析+表情包制作第一阶段网络编程局域网TCP/IP聊天QT实现 main.c ma ...
vue表情包渲染,trie算法实现，表情包资源分享
表情包图片资源 https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/files/emoticon.zip data.json {&qu ...
Vue实现表情包评论
1.效果图 2.Vue 2.1 下载emo表情可以自己去gitee上找,或者直接通过百度云. 链接:https://pan.baidu.com/s/1lsUlLhoAsy_ehQyvdhlrpA 提 ...
vue 表情包编码转换
表情包: emojisList: ['
uni-app 111发送表情包功能
chat.js import $U from "./util.js"; import $H from './request.js'; class chat {constructor ...
problem: 记一次聊天框的表情包弹框不显示的找问题过程
左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...
vue3之带表情包的输入框
样式大致模仿的网页版抖音的评论输入框表情包的引用可以看gitee地址:vue 表情输入组件效果图: 废话不多说,直接上代码 src/components/emotion.vue <templ ...

表情包组件(vue)

表情包组件(vue)相关推荐

最新文章

热门文章