refactor: Package TagList component

Author: recocopliot

components/HomeBlog.vue

@@ -48,13 +48,7 @@
         </ul>
         <hr>
         <h4><i class="iconfont reco-tag"></i> 标签</h4>
-        <div class="tags">
-          <span
-            v-for="(item, index) in tags"
-            :key="index"
-            :style="{ 'backgroundColor': item.color }"
-            @click="getPagesByTags(item.name)">{{item.name}}</span>
-        </div>
+        <TagList @getCurrentTag="getPagesByTags"></TagList>
       </div>
     </div>
 
@@ -87,12 +81,11 @@
 
 <script>
 import AccessNumber from '@theme/components/Valine/AccessNumber'
+import TagList from '@theme/components/TagList.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
-import mixin from '@theme/mixins/index.js'
 
 export default {
-  mixins: [mixin],
-  components: { AccessNumber, NoteAbstract },
+  components: { AccessNumber, NoteAbstract, TagList },
   data () {
     return {
       recoShow: false,
@@ -156,17 +149,6 @@ export default {
       return document.querySelector('.hero').clientHeight
     }
   },
-  created () {
-    if (this.$tags.list.length > 0) {
-      const tags = this.$tags.list
-      tags.map(item => {
-        const color = this._tagColor()
-        item.color = color
-        return tags
-      })
-      this.tags = tags
-    }
-  },
   mounted () {
     this.recoShow = true
   },
@@ -318,28 +300,6 @@ export default {
           }
         }
       }
-      .tags {
-        margin-bottom 30px
-        span {
-          vertical-align: middle;
-          margin: 4px 4px 10px;
-          padding: 4px 8px;
-          display: inline-flex;
-          cursor: pointer;
-          border-radius: 2px;
-          background: #fff;
-          color: #fff;
-          font-size: 13px;
-          box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
-          transition: all .5s
-          &:hover {
-            transform scale(1.04)
-          }
-          &.active {
-            transform scale(1.2)
-          }
-        }
-      }
     }
   }
 

components/TagList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="tags">
+    <span
+      v-for="(item, index) in tags"
+      :key="index"
+      :class="{'active': item.name == currentTag}"
+      :style="{ 'backgroundColor': item.color }"
+      @click="tagClick(item.name)">{{item.name}}</span>
+  </div>
+</template>
+
+<script>
+import mixin from '@theme/mixins/index.js'
+
+export default {
+  mixins: [mixin],
+  props: {
+    currentTag: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      tags: []
+    }
+  },
+  created () {
+    if (this.$tags.list.length > 0) {
+      const tags = this.$tags.list
+      tags.map(item => {
+        const color = this._tagColor()
+        item.color = color
+        return tags
+      })
+      this.tags = [{ name: '全部', color: this._tagColor() }, ...tags]
+    }
+  },
+  methods: {
+    tagClick (tag) {
+      this.$emit('getCurrentTag', tag)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.tags
+  margin 30px 0
+  span
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 4px 8px;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 2px;
+    background: #fff;
+    color: #fff;
+    font-size: 13px;
+    box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+    transition: all .5s
+    &:hover
+      transform scale(1.04)
+    &.active
+      transform scale(1.2)
+</style>

layouts/Tags.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="tags-wrapper" :class="recoShow?'reco-show': 'reco-hide'">
     <Common :sidebar="false" :isComment="false"></Common>
-    <div class="tags">
-      <span
-        v-for="(item, index) in tags"
-        :key="index"
-        :class="{'active': item.name == currentTag}"
-        :style="{ 'backgroundColor': item.color }"
-          @click="tagClick(item.name)">{{item.name}}</span>
-    </div>
+    <TagList :currentTag="currentTag" @getCurrentTag="tagClick"></TagList>
     <note-abstract
       class="list"
       :data="posts"
@@ -26,13 +19,11 @@
 
 <script>
 import Common from '@theme/components/Common.vue'
+import TagList from '@theme/components/TagList.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
-import mixin from '@theme/mixins/index.js'
 
 export default {
-  mixins: [mixin],
-  components: { Common, NoteAbstract },
-
+  components: { Common, NoteAbstract, TagList },
   data () {
     return {
       posts: [],
@@ -43,7 +34,6 @@ export default {
       allTagName: '全部'
     }
   },
-
   computed: {
     // 时间降序后的博客列表
     handlePosts () {
@@ -58,17 +48,9 @@ export default {
       return posts
     }
   },
-
   created () {
     if (this.$tags.list.length > 0) {
       const currentTag = this.$route.query.tag ? this.$route.query.tag : this.currentTag
-      const tags = this.$tags.list
-      tags.map(item => {
-        const color = this._tagColor()
-        item.color = color
-        return tags
-      })
-      this.tags = [{ name: '全部', color: this._tagColor() }, ...tags]
 
       this.getPagesByTags(currentTag)
     }
@@ -135,24 +117,6 @@ export default {
   max-width: 740px;
   margin: 0 auto;
   padding: 4.6rem 2.5rem 0;
-  .tags
-    margin 30px 0
-    span
-      vertical-align: middle;
-      margin: 4px 4px 10px;
-      padding: 4px 8px;
-      display: inline-block;
-      cursor: pointer;
-      border-radius: 2px;
-      background: #fff;
-      color: #fff;
-      font-size: 13px;
-      box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
-      transition: all .5s
-      &:hover
-        transform scale(1.04)
-      &.active
-        transform scale(1.2)
   &.reco-hide {
     .tags, .list, .pagation {
       load-start()