表情样式修改

_src/components/chatRoom/inputArea.vue

@@ -45,7 +45,7 @@
   </div>
 </template>
 <script>
-import Emoji from '@/components/emoji'
+import Emoji from '@/components/emoji/pc'
 import chatAt from '@/components/chatAt'
 // import { Message } from 'element-ui'
 // import { mapState, mapMutations, mapActions } from 'vuex'
@@ -307,17 +307,6 @@ export default {
     height: 100%;
   }
 }
-.emoji-list {
-  position: absolute;
-  border-radius: 4px;
-  border: 1px solid #d6d6d6;
-  left: 10px;
-  height: 226px;
-  top: -186px;
-  overflow: auto;
-  background-color: #ffffff;
-  width: 232px;
-}
 .send-action {
   color: #bababa;
   font-size: 12px;

_src/components/emoji/pc.vue

@@ -0,0 +1,230 @@
+<template>
+  <div id="emojiList" class="emoji-list pub-scroll-box">
+    <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"></li>
+    </ul>
+    <p class="title">全部</p>
+    <ul>
+      <li v-for="(item, key) in emojiList"
+        :key="key"
+        v-html="item"
+        @click="handleClick"></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+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;'
+      ],
+      recentList: []
+    }
+  },
+  mounted () {
+    this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
+  },
+  methods: {
+    handleClick ($el) {
+      let val = $el.target.innerHTML
+      this.$emit('addEmoji', val)
+      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 {
+  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;
+  }
+}
+.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: 6px;
+  cursor: pointer;
+  &:hover{
+    background: #eeeeee;
+  }
+}
+img.emoji {
+  cursor: pointer;
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em;
+}
+</style>