vue+element-ui实现聊天表情包

我是用的本地json数据实现的，表情不是很多，首先创建个json文件，代码如下：

[{
    "codes": "1F600",
    "char": "😀",
    "name": "grinning face"
  },
  {
    "codes": "1F603",
    "char": "😃",
    "name": "grinning face with big eyes"
  },
  {
    "codes": "1F604",
    "char": "😄",
    "name": "grinning face with smiling eyes"
  },
  {
    "codes": "1F601",
    "char": "😁",
    "name": "beaming face with smiling eyes"
  },
  {
    "codes": "1F606",
    "char": "😆",
    "name": "grinning squinting face"
  },
  {
    "codes": "1F605",
    "char": "😅",
    "name": "grinning face with sweat"
  },
  {
    "codes": "1F923",
    "char": "🤣",
    "name": "rolling on the floor laughing"
  },
  {
    "codes": "1F602",
    "char": "😂",
    "name": "face with tears of joy"
  },
  {
    "codes": "1F642",
    "char": "🙂",
    "name": "slightly smiling face"
  },
  {
    "codes": "1F643",
    "char": "🙃",
    "name": "upside-down face"
  },
  {
    "codes": "1F609",
    "char": "😉",
    "name": "winking face"
  },
  {
    "codes": "1F60A",
    "char": "😊",
    "name": "smiling face with smiling eyes"
  },
  {
    "codes": "1F607",
    "char": "😇",
    "name": "smiling face with halo"
  },
  {
    "codes": "1F970",
    "char": "🥰",
    "name": "smiling face with hearts"
  },
  {
    "codes": "1F60D",
    "char": "😍",
    "name": "smiling face with heart-eyes"
  },
  {
    "codes": "1F929",
    "char": "🤩",
    "name": "star-struck"
  },
  {
    "codes": "1F618",
    "char": "😘",
    "name": "face blowing a kiss"
  },
  {
    "codes": "1F617",
    "char": "😗",
    "name": "kissing face"
  },
  {
    "codes": "1F61A",
    "char": "😚",
    "name": "kissing face with closed eyes"
  },
  {
    "codes": "1F619",
    "char": "😙",
    "name": "kissing face with smiling eyes"
  },
  {
    "codes": "1F44B",
    "char": "👋",
    "name": "waving hand"
  },
  {
    "codes": "1F91A",
    "char": "🤚",
    "name": "raised back of hand"
  },
  {
    "codes": "1F590",
    "char": "🖐",
    "name": "hand with fingers splayed"
  },
  {
    "codes": "270B",
    "char": "✋",
    "name": "raised hand"
  },
  {
    "codes": "1F596",
    "char": "🖖",
    "name": "vulcan salute"
  },
  {
    "codes": "1F44C",
    "char": "👌",
    "name": "OK hand"
  },
  {
    "codes": "1F90F",
    "char": "🤏",
    "name": "pinching hand"
  },
  {
    "codes": "270C",
    "char": "✌",
    "name": "victory hand"
  },
  {
    "codes": "1F91E",
    "char": "🤞",
    "name": "crossed fingers"
  },
  {
    "codes": "1F91F",
    "char": "🤟",
    "name": "love-you gesture"
  },
  {
    "codes": "1F918",
    "char": "🤘",
    "name": "sign of the horns"
  },
  {
    "codes": "1F919",
    "char": "🤙",
    "name": "call me hand"
  },
  {
    "codes": "1F448",
    "char": "👈",
    "name": "backhand index pointing left"
  },
  {
    "codes": "1F449",
    "char": "👉",
    "name": "backhand index pointing right"
  },
  {
    "codes": "1F446",
    "char": "👆",
    "name": "backhand index pointing up"
  },
  {
    "codes": "1F595",
    "char": "🖕",
    "name": "middle finger"
  },
  {
    "codes": "1F447",
    "char": "👇",
    "name": "backhand index pointing down"
  },
  {
    "codes": "261D FE0F",
    "char": "☝️",
    "name": "index pointing up"
  },
  {
    "codes": "1F44D",
    "char": "👍",
    "name": "thumbs up"
  },
  {
    "codes": "1F44E",
    "char": "👎",
    "name": "thumbs down"
  },
  {
    "codes": "270A",
    "char": "✊",
    "name": "raised fist"
  },
  {
    "codes": "1F44A",
    "char": "👊",
    "name": "oncoming fist"
  },
  {
    "codes": "1F91B",
    "char": "🤛",
    "name": "left-facing fist"
  },
  {
    "codes": "1F91C",
    "char": "🤜",
    "name": "right-facing fist"
  }

]

vue组件中代码直接贴出来，废话不多说：

<template>
  <div class="chatIcon">
    <el-popover
      placement="top-start"
      width="400"
      trigger="click"
      class="emoBox"
    >
      <div class="emotionList">
        <a
          href="javascript:void(0);"
          @click="getEmo(index)"
          v-for="(item, index) in faceList"
          :key="index"
          class="emotionItem"
          >{{ item }}</a
        >
      </div>
      <el-button
        class="emotionSelect"
        icon="iconfont icon-biaoqing"
        slot="reference"
      ></el-button>
    </el-popover>
    <el-input
      v-model="textarea"
      class="chatText"
      resize="none"
      type="textarea"
      id="textarea"
      rows="5"
      @keyup.enter.native="sendInfo"
    ></el-input>
  </div>
</template>
<script>
const appData = require("@/utils/emoji.json");
export default {
  mounted() {
    for (let i in appData) {
      this.faceList.push(appData[i].char);
    }
  },
  data() {
    return {
      faceList: [],
      textarea: ""
    };
  },
  methods: {
    getEmo(index) {
      var textArea = document.getElementById("textarea");
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          // 非IE浏览器
          textArea.setRangeText(str);
          // 在未选中文本的情况下，重新设置光标位置
          textArea.selectionStart += str.length;
          textArea.focus();
        } else if (document.selection) {
          // IE浏览器
          obj.focus();
          var sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(textArea, this.faceList[index]);
      this.textarea = textArea.value; // 要同步data中的数据
      // console.log(this.faceList[index]);
      return;
    }
  }
};
</script>

<style lang="scss">
/* el-popover是和app同级的，所以scoped的局部属性设置了无效 */
/* 需要设置全局style */
.el-popover {
  height: 200px;
  width: 400px;
  overflow: scroll;
  overflow-x: auto;
}
</style>

<style scoped>
.chatIcon {
  padding: 0 10px;
  font-size: 25px;
}
.emotionList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.emotionItem {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>