表情包组件(vue)

2024-07-11 11:30| 来源: 网络整理| 查看: 265

其实很早都想在博客的留言和评论处使用表情包，奈何博客需要完善的地方太多。于是一直推到了这几天，具体实现效果在博客上可以看到。

在网上查了下，发现微信官方的表情包对外开放。具体规则想如下，于是就有了思路

var EmotionList = ['微笑', '撇嘴', '色'];//改数组没有写完全

//微笑对应的动图

//撇嘴对应的动图

//色对应的动图

我的思路是将表情包组件做成一个子组件，在需要使用表情包的父组件里使用。

首先父组件的input周围，比如留言框后会有个表情包弹框按钮。点击该按钮会弹出表情包弹框，选择表情后弹框关闭，留言框中追加进表情文字，如[[微笑]]。在form submit时，正则匹配出textarea里的像’[[微笑]]'这些字段，替换成，然后正常上传后端接口即可。最后前端展示留言的列表展示留言文本为html格式即可。

具体子父组件间交互是这样的。当父组件点击表情弹框按钮时，父组件通过Dom直接操作子组件属性，使表情弹框弹出。选择好某个表情后，表情弹框关闭，这半步在子组件内部可直接操作，无需子父交互。选中表情关闭弹框的同时还要通知父组件（emit）将选中表情的汉字追加在输入框中。最终父组件提交输入框内容时，正则匹配替换汉字表情为gif动图标签即可。

具体代码如下：子组件（表情包）代码如下：

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; } } }

父组件使用如下：

/*表情弹框打开按钮*/ export default { name: "BlogDetail", methods:{ // 打开表情包弹框 OpenEmotions:function () { this.$refs.EmotionB.OpenEmotion(true); }, //表情选中后追加在input AppendMessageText:function (EmotionChinese) { this.ArticleCommentText += EmotionChinese; } } }

效果演示地址：点击留言框展示入口代码详见github：博客Github

【本文地址】

公司简介

联系我们