fix: cannot click tag labels on outside of the text (fix #84) (#85)

vuepress · Jun 9, 2020 · 4ae4231 · 4ae4231
1 parent c453d0d
commit 4ae4231
Showing 1 changed file with 39 additions and 34 deletions.
diff --git a/components/PostTag.vue b/components/PostTag.vue
@@ -1,6 +1,8 @@
 <template>
   <li class="post-tag">
-    <router-link :to="'/tag/' + tag"> {{ tag }} </router-link>
+    <router-link :to="'/tag/' + tag">
+      <span>{{ tag }}</span>
+    </router-link>
   </li>
 </template>
 
@@ -18,48 +20,51 @@ export default {
 
 <style scoped lang="stylus">
 .post-tag
-  background-color $postTagBgColor
-  border-radius 3px 0 0 3px
-  height 26px
-  padding 0 20px 0 23px
-  position relative
-  cursor pointer
+    height 26px
 
   &:not(:last-child)
     margin-right 10px
 
   a
-    color $postTagColor
+    background-color $postTagBgColor
+    border-radius 3px 0 0 3px
+    padding 0 20px 0 23px
+    position relative
     text-decoration none
-    transition color 0.2s
+    height 26px
+    display inline-block
 
-  &:before
-    position absolute
-    left 10px
-    top 10px
-    background #fff
-    border-radius 50%
-    box-shadow inset 0 1px rgba(0, 0, 0, 0.25)
-    content ''
-    height 6px
-    width 6px
+    span
+      color $postTagColor
+      transition color 0.2s
 
-  &:after
-    position absolute
-    right 0
-    top 0
-    background $bgColor
-    border-bottom 13px solid transparent
-    border-left 10px solid $postTagBgColor
-    border-top 13px solid transparent
-    content ''
-
-  &:hover
-    background-color $accentColor
+    &:before
+      position absolute
+      left 10px
+      top 10px
+      background #fff
+      border-radius 50%
+      box-shadow inset 0 1px rgba(0, 0, 0, 0.25)
+      content ''
+      height 6px
+      width 6px
 
     &:after
-      border-left-color $accentColor
+      position absolute
+      right 0
+      top 0
+      background $bgColor
+      border-bottom 13px solid transparent
+      border-left 10px solid $postTagBgColor
+      border-top 13px solid transparent
+      content ''
+
+    &:hover
+      background-color $accentColor
+
+      &:after
+        border-left-color $accentColor
 
-    a
-      color #fff
+      span
+        color #fff
 </style>