From 6787aa4480884b94d10f88ab080530eafa7f6527 Mon Sep 17 00:00:00 2001
From: jwchan1996 <741755613@qq.com>
Date: Wed, 10 Jun 2020 22:09:53 +0800
Subject: [PATCH] style: clear button default style

---
 .../__snapshots__/DropdownLink.spec.js.snap   |  2 +-
 .../theme-default/components/DropdownLink.vue | 37 ++++++++++++++-----
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 35421b2be7..3940e34c0e 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button>
+<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow down"></span></button> <button type="button" aria-label="Learn More Select" class="mobile-dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
       <!----> <a class="nav-link">
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 0ca7137ed0..a820e2fa8a 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -7,6 +7,17 @@
       class="dropdown-title"
       type="button"
       :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow down"
+      />
+    </button>
+    <button
+      class="mobile-dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
       @click="setOpen(!open)"
     >
       <span class="title">{{ item.text }}</span>
@@ -105,6 +116,11 @@ export default {
 
     isLastItemOfArray (item, array) {
       return last(array) === item
+    },
+
+    handleDropdown () {
+      const isTriggerByTab = event.detail === 0
+      if (isTriggerByTab) this.setOpen(!this.open)
     }
   }
 }
@@ -124,12 +140,20 @@ export default {
     border none
     font-weight 500
     color $textColor
+    outline none
     &:hover
       border-color transparent
     .arrow
       vertical-align middle
       margin-top -1px
       margin-left 0.4rem
+  .mobile-dropdown-title
+    @extends .dropdown-title
+    display none
+    font-weight 600
+    font-size inherit
+      &:hover
+        color $accentColor
   .nav-dropdown
     .dropdown-item
       color inherit
@@ -175,10 +199,9 @@ export default {
     &.open .dropdown-title
       margin-bottom 0.5rem
     .dropdown-title
-      font-weight 600
-      font-size inherit
-      &:hover
-        color $accentColor
+      display: none
+    .mobile-dropdown-title
+      display: block
     .nav-dropdown
       transition height .1s ease-out
       overflow hidden
@@ -203,12 +226,6 @@ export default {
       display block !important
     &.open:blur
       display none
-    .dropdown-title .arrow
-      // make the arrow always down at desktop
-      border-left 4px solid transparent
-      border-right 4px solid transparent
-      border-top 6px solid $arrowBgColor
-      border-bottom 0
     .nav-dropdown
       display none
       // Avoid height shaked by clicking