表情包库: https://apps.timwhitlock.info/emoji/tables/unicode

<template>
  <div @click.stop>
    <div class="phiz" @mousedown.stop>
      <div class="phiz-list" v-show="showPhiz">
        <ul class="list-ul">
          <li @click.self="addPhiz" v-for="(item, index) in emojiList" :key="index">{{ item }}</li>
        </ul>
        <div class="bottom-bar">
          <div class="select-btn" @click.stop="selectEmojiMenu(1)"><icon-svg name="iconSmileysPeople" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
          <div class="select-btn" @click.stop="selectEmojiMenu(2)"><icon-svg name="iconAnimalsNature" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
          <div class="select-btn" @click.stop="selectEmojiMenu(3)"><icon-svg name="iconFoodDrink" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
          <div class="select-btn" @click.stop="selectEmojiMenu(4)"><icon-svg name="iconTravelPlaces" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
          <div class="select-btn" @click.stop="selectEmojiMenu(5)"><icon-svg name="iconSymbols" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
          <!-- <div class="select-btn" @click="selectEmojiMenu(6)"><icon-svg name="iconkaka-emoji" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emoji from \'@/assets/phiz/emoji.json\'
export default {
  props: {
    showPhiz: {
      default: false
    }
  },
  data () {
    return {
      phiz: emoji,
      emojiList: []
    }
  },
  components: {},
  methods: {
    selectEmojiMenu (flag) {
      this.emojiList = []
      switch (flag) {
        case 1:
          console.log(\'第一个菜单\')
          this.initEmoji(\'0x1F64F\', \'0x1F601\')
          break
        case 2:
          console.log(\'第二个菜单\')
          this.initEmoji(\'0x1F40C\', \'0x1F43C\', true)
          break
        case 3:
          console.log(\'第三个菜单\')
          this.initEmoji(\'0x1F354\', \'0x1F372\', true)
          break
        case 4:
          console.log(\'第四个菜单\')
          this.initEmoji(\'0x1F3E0\', \'0x1F3F0\', true)
          break
        case 5:
          console.log(\'第五个菜单\')
          this.initEmoji(\'0x1F48B\', \'0x1F4E6\', true)
          break
        case 6:
          console.log(\'第六个菜单\')
          this.initEmoji(\'0x1F64F\', \'0x1F601\')
          break
      }
    },
    /**
     * 表情的unicode
     * https://apps.timwhitlock.info/emoji/tables/unicode#
     * startUnicode 开始的编码
     * endUnicode 结束的编码
     * flag 相反
     */
    initEmoji (startUnicode, endUnicode, flag) {
      let start
      let end
      if (flag) {
        start = startUnicode
        end = endUnicode
      } else {
        start = endUnicode
        end = startUnicode
      }
      for (let i = start; i <= end; i++) {
        // console.log(i)
        let emoji = String.fromCodePoint(i)
        this.emojiList.push(emoji)
      }
    },
    addPhiz (ev) {
      // console.log(\'添加表情\')
      this.$electron.remote.getCurrentWebContents().insertText(ev.target.innerText)
    }
  },
  created () {
    this.initEmoji(\'0x1F64F\', \'0x1F601\')
  }
}
</script>