chat/_src/components/emoji/index.vue

<template>
  <div class="emoji-wrap">
    <div id="emojiList" class="emoji-list pub-scroll-box" @scroll.passive="handleScroll">
      <div v-show="recentList.length">
        <p class="title">{{$t('emoji.lastestUse')}}</p>
        <ul id="recent-emoji">
          <li
            v-for="(item, key) in recentList"
            :key="key"
            v-html="item.surrogates"
            @click.stop="handleClick(item, $event)"
          ></li>
        </ul>
      </div>
      <div v-for="(arr, key) in emojiList" :key="key">
        <p class="title">{{$t(`emoji.${key}`)}}</p>
        <ul>
          <li
            v-for="(item, ind) in arr"
            :key="ind"
            v-html="item.surrogates"
            @click.stop="handleClick(item, $event)"
          ></li>
        </ul>
      </div>
    </div>
    <ul class="type-list">
      <li
        v-show="recentList.length"
        :class="[{'active' : typeIndex==0}]"
        @click.stop="handleType(0)"
      >
        <i></i>
      </li>
      <li
        v-for="(arr, key,index) in emojiList"
        :key="key"
        :class="[{'active' : typeIndex==index+1}]"
        @click.stop="handleType(index+1)"
      >
        <i></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { getMeechatType, lazyloadImage } from '@/util/util'
import { emojiList } from '@/util/emoji'
import twemoji from 'twemoji'

export default {
  name: 'emojiList',
  props: {
    emojiShow: Boolean // 识别emoji显示
  },
  data () {
    return {
      emojiList,
      recentList: [],
      index: 0,
      typeIndex: 0,
      emojiListSel: null,
      emojiTitleArrSel: [], // 标题组
      meechatType: getMeechatType() // meechat版本
    }
  },
  watch: {
    emojiShow (isShow) {
      if (isShow) {
        this.$root.$el.addEventListener('click', this.closeEmojiList)
      } else {
        this.$root.$el.removeEventListener('click', this.closeEmojiList)
      }
      setTimeout(() => {
        this.handleScroll()
      }, 10)
    }
  },
  computed: {},
  mounted () {
    this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
    this.emojiListSel = document.getElementById('emojiList')
    this.emojiTitleArrSel = this.emojiListSel.getElementsByClassName('title')
    this.emojiImageArrSel = this.emojiListSel.getElementsByTagName('img')

    this.$nextTick(() => {
      this.parseEmoji(this.emojiListSel)
    })
  },
  methods: {
    handleType (index) {
      if (!this.emojiTitleArrSel[index]) return
      this.typeIndex = index
      this.emojiListSel.scrollTop = this.emojiTitleArrSel[index].offsetTop
    },
    handleClick (item, event) {
      let name = item.names
      this.$emit('addEmoji', JSON.stringify(name))

      // 最近使用
      if (this.recentList.length > 9) {
        this.recentList.pop()
      }

      let ind
      let isInRecent = this.recentList.some((val, index) => {
        ind = index
        return name[0] == val.names[0]
      })
      if (isInRecent) this.recentList.splice(ind, 1)

      this.recentList.unshift(item)
      localStorage.setItem('recentEmoji', JSON.stringify(this.recentList))
      let ul = document.getElementById('recent-emoji')
      this.$nextTick(() => {
        this.parseEmoji(ul)
      })
      setTimeout(() => {
        this.loadImage()
      }, 0)
    },
    parseEmoji (ul) {
      let emojiDefault = require('../../assets/icon-face.png')

      twemoji.parse(ul, {
        callback: function (icon, options) {
          return emojiDefault
        },
        attributes (icon, variant) {
          return {
            originurl: 'https://w2.meechat.me/emoji/' + variant + '.svg'
          }
        }
      })
    },
    loadImage () {
      lazyloadImage({
        wrap: this.emojiListSel,
        imageArr: this.emojiImageArrSel
      })
    },
    handleScroll () {
      let listScrollTop = this.emojiListSel.scrollTop
      let titleLen = this.emojiTitleArrSel.length

      this.loadImage()

      // 表情导航
      for (let i = 0; i < titleLen; i++) {
        let item = this.emojiTitleArrSel[i]
        let nextItem = this.emojiTitleArrSel[i + 1]

        if (
          (listScrollTop + 20 > item.offsetTop &&
            nextItem &&
            listScrollTop <= nextItem.offsetTop) ||
          (!nextItem && listScrollTop + 20 > item.offsetTop)
        ) {
          this.typeIndex = i
        }
      }
    },
    closeEmojiList () {
      this.$emit('closeEmojiList')
    }
  }
}
</script>

<style lang="scss">
.c-main {
  .emoji-wrap {
    position: absolute;
    top: -269px;
    left: 4px;
    width: 432px;
    padding-bottom: 44px;
    border-radius: 4px;
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    box-shadow: 0px 1px 5px 1px #cdcdcd;
  }
}
.emoji-wrap {
  .type-list {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 44px;
    display: flex;
    background-color: #eeeeee;
    li {
      flex: 1;
      &.active {
        background-color: #ffffff;
      }
      @for $i from 1 through 8 {
        &:nth-child(#{$i}) {
          i {
            display: block;
            height: 100%;
            // background: url(../../assets/h5/emoji-type#{$i}.png) center / auto px2rem(48) no-repeat;
            background: url(../../assets/h5/emoji-type#{$i}.png)
              center /
              auto
              24px
              no-repeat;
          }
        }
      }
    }
  }
  .emoji-list {
    height: 210px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 2px 2px 6px 2px;
    padding: 0 5px;
    .title {
      font-size: 12px;
      font-weight: 700;
      padding: 0 7.5px;
      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: 5px;
    cursor: pointer;
    &:hover {
      background: #eeeeee;
    }
    img.emoji {
      width: 24px;
      height: 24px;
    }
  }
}

.mini-wrap,
.h5-wrap {
  .emoji-wrap {
    padding-bottom: 40px;
    position: relative;
    width: auto;
    top: 0;
    border-radius: 0;
    left: 0;
    border: 0;
    background: transparent;
  }
  .emoji-list {
    position: relative;
    top: 0;
    left: 0;
    height: px2rem(379);
    background: transparent;
    width: auto;
    border: 0;
    margin: 0;
    padding: 0;

    .title {
      padding: 0 px2rem(24);
    }
    ul {
      padding-left: px2rem(12);
    }
    li {
      padding: px2rem(12) px2rem(21);
    }
    img.emoji {
      width: px2rem(48);
      height: px2rem(48);
    }
  }
  .type-list {
    background: #ffffff;
    height: 40px;
    li {
      &.active {
        background-color: #e2e1de;
      }

      @for $i from 1 through 8 {
        &:nth-child(#{$i}) {
          i {
            background: url(../../assets/h5/emoji-type#{$i}.png)
              center /
              auto
              px2rem(48)
              no-repeat;
          }
        }
      }
    }
  }
}
</style>