chat/_src/components/emoji/index.vue

<template>
  <ul id="emojiList" class="emoji-list pub-scroll-box">
    <li v-for="item in emojiList"
      :key="item"
      v-html="item"
      @click="handleClick"></li>
  </ul>
</template>

<script>

export default {
  name: 'emojiList',
  data () {
    return {
      emojiList: [
        '&#x1F600;',
        '&#x1F601;',
        '&#x1F602;',
        '&#x1F603;',
        '&#x1F604;',
        '&#x1F605;',
        '&#x1F606;',
        '&#x1F607;',
        '&#x1F608;',
        '&#x1F609;',
        '&#x1F60A;',
        '&#x1F60B;',
        '&#x1F60C;',
        '&#x1F60D;',
        '&#x1F60E;',
        '&#x1F60F;',
        '&#x1F610;',
        '&#x1F611;',
        '&#x1F612;',
        '&#x1F613;',
        '&#x1F614;',
        '&#x1F615;',
        '&#x1F616;',
        '&#x1F617;',
        '&#x1F618;',
        '&#x1F619;',
        '&#x1F61A;',
        '&#x1F61B;',
        '&#x1F61C;',
        '&#x1F61D;',
        '&#x1F61E;',
        '&#x1F61F;',
        '&#x1F620;',
        '&#x1F621;',
        '&#x1F622;',
        '&#x1F623;',
        '&#x1F624;',
        '&#x1F625;',
        '&#x1F626;',
        '&#x1F627;',
        '&#x1F628;',
        '&#x1F629;',
        '&#x1F62A;',
        '&#x1F62B;',
        '&#x1F62C;',
        '&#x1F62D;',
        '&#x1F62E;',
        '&#x1F62F;',
        '&#x1F630;',
        '&#x1F631;',
        '&#x1F632;',
        '&#x1F633;',
        '&#x1F634;',
        '&#x1F635;',
        '&#x1F636;',
        '&#x1F637;'
      ],
      animalList: [
        '&#x1F63A;',
        '&#x1F638;',
        '&#x1F639;',
        '&#x1F63B;',
        '&#x1F63C;',
        '&#x1F63D;',
        '&#x1F640;',
        '&#x1F63F;',
        '&#x1F63E;',
        '&#x1F648;',
        '&#x1F649;',
        '&#x1F64A;',
        '&#x1F476;',
        '&#x1F9D2;',
        '&#x1F466;',
        '&#x1F467;',
        '&#x1F9D1;',
        '&#x1F468;',
        '&#x1F469;',
        '&#x1F9D3;',
        '&#x1F474;',
        '&#x1F608;',
        '&#x1F47F;',
        '&#x1F921;',
        '&#x1F479;',
        '&#x1F47A;',
        '&#x1F480;',
        '&#x2620;',
        '&#x1F47B;',
        '&#x1F47D;',
        '&#x1F47E;',
        '&#x1F916;',
        '&#x1F4A9;',
        '&#x1F412;',
        '&#x1F98D;',
        '&#x1F436;',
        '&#x1F415;',
        '&#x1F429;',
        '&#x1F43A;',
        '&#x1F98A;',
        '&#x1F99D;',
        '&#x1F431;',
        '&#x1F408;',
        '&#x1F981;',
        '&#x1F42F;',
        '&#x1F405;',
        '&#x1F406;',
        '&#x1F434;',
        '&#x1F40E;',
        '&#x1F984;',
        '&#x1F993;',
        '&#x1F98C;',
        '&#x1F42E;',
        '&#x1F402;',
        '&#x1F403;',
        '&#x1F404;',
        '&#x1F437;',
        '&#x1F416;',
        '&#x1F417;',
        '&#x1F43D;',
        '&#x1F40F;',
        '&#x1F411;',
        '&#x1F410;',
        '&#x1F42A;',
        '&#x1F42B;',
        '&#x1F999;',
        '&#x1F992;',
        '&#x1F418;',
        '&#x1F98F;',
        '&#x1F99B;',
        '&#x1F42D;',
        '&#x1F401;',
        '&#x1F400;'
      ]
    }
  },
  mounted () {
    //   var ul = document.getElementById('emojiList')
    //   twemoji.parse(ul, { 'size': 16 })
  },
  methods: {
    handleClick ($el) {
      this.$emit('addEmoji', $el.target.innerHTML)
    }
  }
}
</script>

<style lang="scss" scoped>
.emoji-list{
  max-height: 180px;
  overflow: auto;
}
ul.emoji-list * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
ul.emoji-list li {
  font-size: 28px;
  border-radius: 4px;
  display: inline-block;
  padding: 6px;
  cursor: pointer;
  &:hover{
    background: #eeeeee;
  }
}
img.emoji {
  cursor: pointer;
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}
</style>