Support emoji picker.

halo-dev · Aug 24, 2019 · 4e6515c · 4e6515c
1 parent 5de037c
commit 4e6515c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,10 @@
     "url": "git+https://github.com/halo-dev/halo-comment.git"
   },
   "author": "halo-dev",
-  "contributors": ["ruibaby","johnniang"],
+  "contributors": [
+    "ruibaby",
+    "johnniang"
+  ],
   "bugs": {
     "url": "https://github.com/halo-dev/halo-comment/issues"
   },
@@ -25,6 +28,7 @@
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
     "simplemde": "^1.11.2",
+    "v-emoji-picker": "^1.1.5",
     "vue": "^2.6.10"
   },
   "devDependencies": {

diff --git a/src/components/CommentEditor.vue b/src/components/CommentEditor.vue
@@ -6,6 +6,14 @@
       @click.self="close"
       @keydown.esc.once="close"
     >
+      <div class="comment-poster-editor-emoji">
+        <VEmojiPicker
+          :pack="pack"
+          @select="selectEmoji"
+          v-show="emojiDialogVisible"
+          labelSearch="搜索"
+        />
+      </div>
       <div class="comment-modal-container">
         <div class="comment-poster-container active">
           <ul class="comment-poster-controls">
@@ -81,6 +89,15 @@
                         @click="handlePreviewClick"
                       >预览</button>
                     </li>
+                    <li class="editor-item-emoji">
+                      <button
+                        class="editor-btn-emoji"
+                        type="button"
+                        @click="toogleDialogEmoji"
+                      >
+                        😃
+                      </button>
+                    </li>
                   </ul>
                 </div>
               </div>
@@ -94,11 +111,16 @@
 
 <script>
 import md5 from 'md5'
+import VEmojiPicker from 'v-emoji-picker'
+import packData from 'v-emoji-picker/data/emojis.json'
 import { isEmpty } from '../utils/util'
 import commentApi from '../apis/comment'
 
 export default {
   name: 'CommentEditor',
+  components: {
+    VEmojiPicker
+  },
   props: {
     targetId: {
       type: Number,
@@ -126,11 +148,13 @@ export default {
   },
   data() {
     return {
+      pack: packData,
+      emojiDialogVisible: false,
       comment: {
         author: null,
         authorUrl: null,
         email: null,
-        content: null
+        content: ''
       }
     }
   },
@@ -153,14 +177,20 @@ export default {
     this.comment.email = localStorage.getItem('comment-email')
   },
   methods: {
+    toogleDialogEmoji() {
+      this.emojiDialogVisible = !this.emojiDialogVisible
+    },
+    selectEmoji(emoji) {
+      this.comment.content += emoji.emoji
+      this.toogleDialogEmoji()
+    },
     close() {
       this.$emit('close', false)
     },
     exit() {
       if (this.comment.content && !window.confirm('评论还未发布，是否放弃？')) {
         return
       }
-
       this.$emit('exit', false)
     },
     handleAuthorInput() {

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -510,6 +510,25 @@
                       cursor: pointer;
                       transition: all 0.4s ease-in-out;
 
+                      &:hover {
+                        background-color: #d7dfea;
+                        transition: all 0.4s ease-in-out;
+                      }
+                    }
+                  }
+                  .editor-item-emoji {
+                    .editor-btn-emoji {
+                      font-size: inherit;
+                      font-family: inherit;
+                      color: #667c99;
+                      padding: 0.5em 1em;
+                      outline: none;
+                      border: none;
+                      background-color: #e8ecf3;
+                      border-radius: 4px;
+                      cursor: pointer;
+                      transition: all 0.4s ease-in-out;
+
                       &:hover {
                         background-color: #d7dfea;
                         transition: all 0.4s ease-in-out;