vue和electron做的聊天应用表情包处理

表情包库: 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>