123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <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
- },
- data () {
- return {
- emojiList,
- recentList: [],
- index: 0,
- typeIndex: 0,
- emojiListSel: null,
- emojiTitleArrSel: [],
- meechatType: getMeechatType()
- }
- },
- 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>
|