chat/_src/components/emoji/pc.vue

<template>
  <div id="emojiList" class="emoji-list pub-scroll-box">
    <p class="title" v-if="recentList.length">最近使用</p>
    <ul v-if="recentList.length">
      <li v-for="(item, key) in recentList"
        :key="key"
        v-html="item"
        @click="handleClick(item.names, $event)"></li>
    </ul>
    <div v-for="(arr, key) in emojiList" :key="key">
      <p class="title">{{key}}</p>
      <ul>
        <li v-for="(item, ind) in arr"
          :key="ind"
          v-html="item.surrogates"
          @click="handleClick(item.names, $event)"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { emojiList } from '@/util/emoji'

export default {
  name: 'emojiList',
  data () {
    return {
      emojiList,
      recentList: []
    }
  },
  mounted () {
    this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
  },
  methods: {
    handleClick (name, event) {
      let val = event.target.innerHTML
      this.$emit('addEmoji', JSON.stringify(name))
      if (this.recentList.length > 11) {
        this.recentList.pop()
      }
      if (this.recentList.includes(val)) {
        let ind = this.recentList.indexOf(val)
        this.recentList.splice(ind, 1)
      }
      this.recentList.unshift(val)
      localStorage.setItem('recentEmoji', JSON.stringify(this.recentList))
    }
  }
}
</script>

<style lang="scss" scoped>
.emoji-list {
  position: absolute;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  left: 4px;
  height: 240px;
  top: -248px;
  overflow: auto;
  background-color: #ffffff;
  width: 488px;
  overflow: auto;
  .title{
    font-size: 12px;
    padding: 0 14px;
    height: 30px;
    line-height: 30px;
    color: #999999;
  }
}
.emoji-list * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.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>