|
|
@@ -1,177 +1,96 @@
|
|
|
<template>
|
|
|
- <ul id="emojiList" class="emoji-list pub-scroll-box">
|
|
|
- <li v-for="item in emojiList"
|
|
|
- :key="item"
|
|
|
- v-html="item"
|
|
|
- @click="handleClick"></li>
|
|
|
- </ul>
|
|
|
+ <div id="emojiList" class="emoji-list pub-scroll-box" :class="{'mini-emoji-wrap': isMini}">
|
|
|
+ <p class="title" v-if="recentList.length">最近使用</p>
|
|
|
+ <ul v-if="recentList.length">
|
|
|
+ <li v-for="(item, key) in recentList"
|
|
|
+ :key="key"
|
|
|
+ v-html="item"
|
|
|
+ @click="handleClick(item.names, $event)"></li>
|
|
|
+ </ul>
|
|
|
+ <div v-for="(arr, key) in emojiList" :key="key">
|
|
|
+ <p class="title">{{key}}</p>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, ind) in arr"
|
|
|
+ :key="ind"
|
|
|
+ v-html="item.surrogates"
|
|
|
+ @click="handleClick(item.names, $event)"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { emojiList } from '@/util/emoji'
|
|
|
+import twemoji from 'twemoji'
|
|
|
|
|
|
export default {
|
|
|
name: 'emojiList',
|
|
|
+ props: {
|
|
|
+ isMini: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
- emojiList: [
|
|
|
- '😀',
|
|
|
- '😁',
|
|
|
- '😂',
|
|
|
- '😃',
|
|
|
- '😄',
|
|
|
- '😅',
|
|
|
- '😆',
|
|
|
- '😇',
|
|
|
- '😈',
|
|
|
- '😉',
|
|
|
- '😊',
|
|
|
- '😋',
|
|
|
- '😌',
|
|
|
- '😍',
|
|
|
- '😎',
|
|
|
- '😏',
|
|
|
- '😐',
|
|
|
- '😑',
|
|
|
- '😒',
|
|
|
- '😓',
|
|
|
- '😔',
|
|
|
- '😕',
|
|
|
- '😖',
|
|
|
- '😗',
|
|
|
- '😘',
|
|
|
- '😙',
|
|
|
- '😚',
|
|
|
- '😛',
|
|
|
- '😜',
|
|
|
- '😝',
|
|
|
- '😞',
|
|
|
- '😟',
|
|
|
- '😠',
|
|
|
- '😡',
|
|
|
- '😢',
|
|
|
- '😣',
|
|
|
- '😤',
|
|
|
- '😥',
|
|
|
- '😦',
|
|
|
- '😧',
|
|
|
- '😨',
|
|
|
- '😩',
|
|
|
- '😪',
|
|
|
- '😫',
|
|
|
- '😬',
|
|
|
- '😭',
|
|
|
- '😮',
|
|
|
- '😯',
|
|
|
- '😰',
|
|
|
- '😱',
|
|
|
- '😲',
|
|
|
- '😳',
|
|
|
- '😴',
|
|
|
- '😵',
|
|
|
- '😶',
|
|
|
- '😷'
|
|
|
- ],
|
|
|
- animalList: [
|
|
|
- '😺',
|
|
|
- '😸',
|
|
|
- '😹',
|
|
|
- '😻',
|
|
|
- '😼',
|
|
|
- '😽',
|
|
|
- '🙀',
|
|
|
- '😿',
|
|
|
- '😾',
|
|
|
- '🙈',
|
|
|
- '🙉',
|
|
|
- '🙊',
|
|
|
- '👶',
|
|
|
- '🧒',
|
|
|
- '👦',
|
|
|
- '👧',
|
|
|
- '🧑',
|
|
|
- '👨',
|
|
|
- '👩',
|
|
|
- '🧓',
|
|
|
- '👴',
|
|
|
- '😈',
|
|
|
- '👿',
|
|
|
- '🤡',
|
|
|
- '👹',
|
|
|
- '👺',
|
|
|
- '💀',
|
|
|
- '☠',
|
|
|
- '👻',
|
|
|
- '👽',
|
|
|
- '👾',
|
|
|
- '🤖',
|
|
|
- '💩',
|
|
|
- '🐒',
|
|
|
- '🦍',
|
|
|
- '🐶',
|
|
|
- '🐕',
|
|
|
- '🐩',
|
|
|
- '🐺',
|
|
|
- '🦊',
|
|
|
- '🦝',
|
|
|
- '🐱',
|
|
|
- '🐈',
|
|
|
- '🦁',
|
|
|
- '🐯',
|
|
|
- '🐅',
|
|
|
- '🐆',
|
|
|
- '🐴',
|
|
|
- '🐎',
|
|
|
- '🦄',
|
|
|
- '🦓',
|
|
|
- '🦌',
|
|
|
- '🐮',
|
|
|
- '🐂',
|
|
|
- '🐃',
|
|
|
- '🐄',
|
|
|
- '🐷',
|
|
|
- '🐖',
|
|
|
- '🐗',
|
|
|
- '🐽',
|
|
|
- '🐏',
|
|
|
- '🐑',
|
|
|
- '🐐',
|
|
|
- '🐪',
|
|
|
- '🐫',
|
|
|
- '🦙',
|
|
|
- '🦒',
|
|
|
- '🐘',
|
|
|
- '🦏',
|
|
|
- '🦛',
|
|
|
- '🐭',
|
|
|
- '🐁',
|
|
|
- '🐀'
|
|
|
- ]
|
|
|
+ emojiList,
|
|
|
+ recentList: []
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
- // var ul = document.getElementById('emojiList')
|
|
|
- // twemoji.parse(ul, { 'size': 16 })
|
|
|
+ this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
|
|
|
+ var ul = document.getElementById('emojiList')
|
|
|
+ twemoji.parse(ul, {
|
|
|
+ callback: function (icon, options) {
|
|
|
+ return 'https://w2.meechat.me/emoji/' + icon + '.svg?1'
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
- handleClick ($el) {
|
|
|
- this.$emit('addEmoji', $el.target.innerHTML)
|
|
|
+ handleClick (name, event) {
|
|
|
+ let val = event.target.innerHTML
|
|
|
+ this.$emit('addEmoji', JSON.stringify(name))
|
|
|
+ if (this.recentList.length > 11) {
|
|
|
+ this.recentList.pop()
|
|
|
+ }
|
|
|
+ if (this.recentList.includes(val)) {
|
|
|
+ let ind = this.recentList.indexOf(val)
|
|
|
+ this.recentList.splice(ind, 1)
|
|
|
+ }
|
|
|
+ this.recentList.unshift(val)
|
|
|
+ localStorage.setItem('recentEmoji', JSON.stringify(this.recentList))
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.emoji-list{
|
|
|
- max-height: 180px;
|
|
|
+.emoji-list {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #d6d6d6;
|
|
|
+ left: 4px;
|
|
|
+ height: 240px;
|
|
|
+ top: -248px;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 488px;
|
|
|
overflow: auto;
|
|
|
+ .title{
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 14px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
-ul.emoji-list * {
|
|
|
+.emoji-list * {
|
|
|
-webkit-user-select: none;
|
|
|
-moz-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
user-select: none;
|
|
|
}
|
|
|
-ul.emoji-list li {
|
|
|
+.emoji-list li {
|
|
|
font-size: 28px;
|
|
|
border-radius: 4px;
|
|
|
display: inline-block;
|
|
|
@@ -181,11 +100,12 @@ ul.emoji-list li {
|
|
|
background: #eeeeee;
|
|
|
}
|
|
|
}
|
|
|
-img.emoji {
|
|
|
- cursor: pointer;
|
|
|
- height: 1em;
|
|
|
- width: 1em;
|
|
|
- margin: 0 .05em 0 .1em;
|
|
|
- vertical-align: -0.1em;
|
|
|
+.mini-emoji-wrap{
|
|
|
+ &.emoji-list{
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: auto;
|
|
|
+ top: -242px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
dmy