_src/components/emoji/pc.vue

@@ -5,161 +5,28 @@
       <li v-for="(item, key) in recentList"
         :key="key"
         v-html="item"
-        @click="handleClick"></li>
-    </ul>
-    <p class="title">全部</p>
-    <ul>
-      <li v-for="(item, key) in emojiList"
-        :key="key"
-        v-html="item"
-        @click="handleClick"></li>
+        @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'
 
 export default {
   name: 'emojiList',
-  computed: {
-    emojiList () {
-      return this.faceList.concat(this.animalList)
-    }
-  },
   data () {
     return {
-      faceList: [
-        '&#x1F600;',
-        '&#x1F601;',
-        '&#x1F602;',
-        '&#x1F603;',
-        '&#x1F604;',
-        '&#x1F605;',
-        '&#x1F606;',
-        '&#x1F607;',
-        '&#x1F608;',
-        '&#x1F609;',
-        '&#x1F60A;',
-        '&#x1F60B;',
-        '&#x1F60C;',
-        '&#x1F60D;',
-        '&#x1F60E;',
-        '&#x1F60F;',
-        '&#x1F610;',
-        '&#x1F611;',
-        '&#x1F612;',
-        '&#x1F613;',
-        '&#x1F614;',
-        '&#x1F615;',
-        '&#x1F616;',
-        '&#x1F617;',
-        '&#x1F618;',
-        '&#x1F619;',
-        '&#x1F61A;',
-        '&#x1F61B;',
-        '&#x1F61C;',
-        '&#x1F61D;',
-        '&#x1F61E;',
-        '&#x1F61F;',
-        '&#x1F620;',
-        '&#x1F621;',
-        '&#x1F622;',
-        '&#x1F623;',
-        '&#x1F624;',
-        '&#x1F625;',
-        '&#x1F626;',
-        '&#x1F627;',
-        '&#x1F628;',
-        '&#x1F629;',
-        '&#x1F62A;',
-        '&#x1F62B;',
-        '&#x1F62C;',
-        '&#x1F62D;',
-        '&#x1F62E;',
-        '&#x1F62F;',
-        '&#x1F630;',
-        '&#x1F631;',
-        '&#x1F632;',
-        '&#x1F633;',
-        '&#x1F634;',
-        '&#x1F635;',
-        '&#x1F636;',
-        '&#x1F637;'
-      ],
-      animalList: [
-        '&#x1F63A;',
-        '&#x1F638;',
-        '&#x1F639;',
-        '&#x1F63B;',
-        '&#x1F63C;',
-        '&#x1F63D;',
-        '&#x1F640;',
-        '&#x1F63F;',
-        '&#x1F63E;',
-        '&#x1F648;',
-        '&#x1F649;',
-        '&#x1F64A;',
-        '&#x1F476;',
-        '&#x1F9D2;',
-        '&#x1F466;',
-        '&#x1F467;',
-        '&#x1F9D1;',
-        '&#x1F468;',
-        '&#x1F469;',
-        '&#x1F9D3;',
-        '&#x1F474;',
-        '&#x1F47F;',
-        '&#x1F921;',
-        '&#x1F479;',
-        '&#x1F47A;',
-        '&#x1F480;',
-        '&#x2620;',
-        '&#x1F47B;',
-        '&#x1F47D;',
-        '&#x1F47E;',
-        '&#x1F916;',
-        '&#x1F4A9;',
-        '&#x1F412;',
-        '&#x1F98D;',
-        '&#x1F436;',
-        '&#x1F415;',
-        '&#x1F429;',
-        '&#x1F43A;',
-        '&#x1F98A;',
-        '&#x1F99D;',
-        '&#x1F431;',
-        '&#x1F408;',
-        '&#x1F981;',
-        '&#x1F42F;',
-        '&#x1F405;',
-        '&#x1F406;',
-        '&#x1F434;',
-        '&#x1F40E;',
-        '&#x1F984;',
-        '&#x1F993;',
-        '&#x1F98C;',
-        '&#x1F42E;',
-        '&#x1F402;',
-        '&#x1F403;',
-        '&#x1F404;',
-        '&#x1F437;',
-        '&#x1F416;',
-        '&#x1F417;',
-        '&#x1F43D;',
-        '&#x1F40F;',
-        '&#x1F411;',
-        '&#x1F410;',
-        '&#x1F42A;',
-        '&#x1F42B;',
-        '&#x1F999;',
-        '&#x1F992;',
-        '&#x1F418;',
-        '&#x1F98F;',
-        '&#x1F99B;',
-        '&#x1F42D;',
-        '&#x1F401;',
-        '&#x1F400;'
-      ],
+      emojiList,
       recentList: []
     }
   },
@@ -167,9 +34,9 @@ export default {
     this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
   },
   methods: {
-    handleClick ($el) {
-      let val = $el.target.innerHTML
-      this.$emit('addEmoji', val)
+    handleClick (name, event) {
+      let val = event.target.innerHTML
+      this.$emit('addEmoji', JSON.stringify(name))
       if (this.recentList.length > 11) {
         this.recentList.pop()
       }

_src/mixins/chat.js

@@ -1,5 +1,6 @@
 import { mapActions, mapState, mapMutations } from 'vuex'
 import { scrollMsgIntoView } from '@/util/util.js'
+import { emojiList } from '@/util/emoji'
 import { Message } from 'element-ui'
 import ImageMin from '@/util/imageMin.js'
 
@@ -289,6 +290,18 @@ export const inputMixin = {
     }),
     isPrivate () {
       return this.$store.getters.isPrivate
+    },
+    emojiMap () {
+      var emojiMap = {}
+      for (let i in emojiList) {
+        let arr = emojiList[i]
+        arr.forEach(v => {
+          let names = JSON.stringify(v.names)
+          let emoji = v.surrogates
+          emojiMap[names] = emoji
+        })
+      }
+      return emojiMap
     }
   },
   data () {
@@ -324,7 +337,16 @@ export const inputMixin = {
         return
       }
 
-      let text = this.inputMsg.trim()
+      // 替换emoji字符串
+      let _inputMsg = this.inputMsg
+      for (let k in this.emojiMap) {
+        if (_inputMsg.indexOf(k) > -1) {
+          let reg = new RegExp(k, 'g')
+          _inputMsg = _inputMsg.replace(reg, this.emojiMap[k])
+        }
+      }
+
+      let text = _inputMsg.trim()
 
       if (text.length === 0) {
         Message({

_src/util/emoji.js

@@ -1,4 +1,4 @@
-export const emojiList = {
+const emojiList = {
   people: [{ names: ['grinning'], surrogates: '😀' }, { names: ['grimacing'], surrogates: '😬' }, {
     names: ['grin'],
     surrogates: '😁'
@@ -1704,3 +1704,7 @@ export const emojiList = {
     surrogates: '🇲🇫'
   }, { names: ['gay_pride_flag', 'rainbow_flag'], surrogates: '🏳️‍🌈' }]
 }
+
+export {
+  emojiList
+}