最新表情包组件(vue)_vue表情包组件(1)，致前端开发者

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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

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


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/7a2001ba089d2869c935f9a8dc09e3fb.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/a6490167bede9aecfc3404139dd79281.webp?x-oss-process=image/format,png)



1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-thxOIhRy-1715267779509)]