表情包组件(vue)

86 阅读 0 评论 57 点赞

我是靠谱客的博主调皮太阳，这篇文章主要介绍表情包组件(vue)，现在分享给大家，希望可以做个参考。

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

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

复制代码

1
2
3
4
5
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动图标签即可。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>

父组件使用如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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);
       },
       //表情选中后追加在input
       AppendMessageText:function (EmotionChinese) {
         this.ArticleCommentText += EmotionChinese;
       }
    }
}