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>

vue和electron做的聊天应用表情包处理的相关教程结束。