fix: fixed basicButton style

修正BasicButton的样式
vbenjs · Aug 15, 2021 · beb4ae9 · beb4ae9
1 parent cc46935
commit beb4ae9
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 30 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -17,6 +17,7 @@
   - 修复在`editComponentProps`中为编辑组件提供的`size`属性无效的问题
 - **Qrcode** 修复二维码组件在创建时未能及时绘制的问题
 - **BasicModal** 修复`helpMessage`属性不起作用的问题
+- **BasicButton** 修复按钮样式表现与 antd 官方不一致的问题
 - **其它** 修复`useRedo`(重新加载当前路由)会丢失路由`params`数据的问题
 
 ## 2.7.0(2021-08-03)

diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
@@ -20,23 +20,23 @@
     border-color: transparent !important;
   }
 
-  &-primary {
-    color: @white;
-    background-color: @button-primary-color;
-    border-width: 0;
-
-    &:hover,
-    &:focus {
-      color: @white !important;
-      background-color: @button-primary-hover-color;
-    }
-
-    &[disabled],
-    &[disabled]:hover {
-      color: @white;
-      background-color: fade(@button-primary-color, 40%);
-    }
-  }
+  //&-primary {
+  //  color: @white;
+  //  background-color: @button-primary-color;
+  //  border-width: 0;
+  //
+  //  &:hover,
+  //  &:focus {
+  //    color: @white !important;
+  //    background-color: @button-primary-hover-color;
+  //  }
+  //
+  //  &[disabled],
+  //  &[disabled]:hover {
+  //    color: @white;
+  //    background-color: fade(@button-primary-color, 40%);
+  //  }
+  //}
 
   &-default {
     color: @button-cancel-color;
@@ -86,6 +86,10 @@
       color: @button-success-hover-color;
       border-color: transparent;
     }
+
+    &:active {
+      color: @button-success-active-color;
+    }
   }
 
   &-success.ant-btn-link.ant-btn-loading,
@@ -111,6 +115,11 @@
       border-color: @button-success-hover-color;
     }
 
+    &:active {
+      background-color: @button-success-active-color;
+      border-color: @button-success-active-color;
+    }
+
     &[disabled],
     &[disabled]:hover {
       color: @white;
@@ -128,6 +137,10 @@
       color: @button-warn-hover-color;
       border-color: transparent;
     }
+
+    &:active {
+      color: @button-warn-active-color;
+    }
   }
 
   &-warning:not(.ant-btn-link) {
@@ -143,6 +156,11 @@
       border-color: @button-warn-hover-color;
     }
 
+    &:active {
+      background-color: @button-warn-active-color;
+      border-color: @button-warn-active-color;
+    }
+
     &[disabled],
     &[disabled]:hover {
       color: @white;
@@ -162,6 +180,10 @@
       color: @button-error-hover-color;
       border-color: transparent;
     }
+
+    &:active {
+      color: @button-error-active-color;
+    }
   }
 
   &-error:not(.ant-btn-link) {
@@ -177,6 +199,11 @@
       border-color: @button-error-hover-color;
     }
 
+    &:active {
+      background-color: @button-error-active-color;
+      border-color: @button-error-active-color;
+    }
+
     &[disabled],
     &[disabled]:hover {
       color: @white;
@@ -187,7 +214,7 @@
 
   &-background-ghost.ant-btn-link,
   &.ant-btn-dashed:not([disabled='disabled']) {
-    color: @text-color-call-out;
+    // color: @text-color-call-out;
 
     &:hover {
       color: @button-primary-color;
@@ -209,9 +236,63 @@
 
     &[disabled],
     &[disabled]:hover {
-      color: @button-ghost-color;
+      color: fade(@white, 40%) !important;
       background-color: fade(@white, 40%);
-      border-color: fade(@button-ghost-color, 40%);
+      border-color: fade(@white, 40%) !important;
+    }
+  }
+
+  &-background-ghost&-success:not(.ant-btn-link) {
+    color: @button-success-color;
+    background-color: transparent;
+    border-color: @button-success-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-success-hover-color !important;
+      border-color: @button-success-hover-color;
+    }
+
+    &:active {
+      color: @button-success-active-color;
+      border-color: @button-success-active-color;
+    }
+  }
+
+  &-background-ghost&-warn:not(.ant-btn-link) {
+    color: @button-warn-color;
+    background-color: transparent;
+    border-color: @button-warn-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-warn-hover-color !important;
+      border-color: @button-warn-hover-color;
+    }
+
+    &:active {
+      color: @button-warn-active-color;
+      border-color: @button-warn-active-color;
+    }
+  }
+
+  &-background-ghost&-error:not(.ant-btn-link) {
+    color: @button-error-color;
+    background-color: transparent;
+    border-color: @button-error-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-error-hover-color !important;
+      border-color: @button-error-hover-color;
+    }
+
+    &:active {
+      color: @button-error-active-color;
+      border-color: @button-error-active-color;
     }
   }
 

diff --git a/src/design/color.less b/src/design/color.less
@@ -108,20 +108,24 @@ html {
 // =================================
 
 @button-primary-color: @primary-color;
-@button-primary-hover-color: darken(@primary-color, 5%);
+@button-primary-hover-color: lighten(@primary-color, 5%);
+@button-primary-active-color: darken(@primary-color, 5%);
 
 @button-ghost-color: @primary-color;
 @button-ghost-hover-color: lighten(@primary-color, 10%);
 @button-ghost-hover-bg-color: #e1ebf6;
 
 @button-success-color: @success-color;
-@button-success-hover-color: darken(@success-color, 10%);
+@button-success-hover-color: lighten(@success-color, 10%);
+@button-success-active-color: darken(@success-color, 10%);
 
 @button-warn-color: @warning-color;
-@button-warn-hover-color: darken(@warning-color, 10%);
+@button-warn-hover-color: lighten(@warning-color, 10%);
+@button-warn-active-color: darken(@warning-color, 10%);
 
 @button-error-color: @error-color;
-@button-error-hover-color: darken(@error-color, 10%);
+@button-error-hover-color: lighten(@error-color, 10%);
+@button-error-active-color: darken(@error-color, 10%);
 
 @button-cancel-color: @text-color-call-out;
 @button-cancel-bg-color: @white;

diff --git a/src/views/demo/comp/button/index.vue b/src/views/demo/comp/button/index.vue
@@ -40,12 +40,23 @@
 
     <div class="my-2">
       <h3>ghost</h3>
-      <a-button ghost> 幽灵 </a-button>
-      <a-button ghost class="ml-2" disabled> 禁用 </a-button>
-      <a-button ghost class="ml-2" loading> loading </a-button>
-      <a-button ghost type="link" class="ml-2"> link </a-button>
-      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>
-      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>
+      <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
+      <a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button>
+      <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
+
+      <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </a-button>
+      <div class="bg-gray-400 p-2 m-2">
+        <h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
+        <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
+        <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
+        <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
+        <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
+        <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
+        <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
+      </div>
+      <!--      <a-button ghost type="link" class="ml-2"> link </a-button>-->
+      <!--      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
+      <!--      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
     </div>
 
     <div class="my-2">