[new feature] Button: add hairline prop (#1439)

example/pages/button/index.wxml

@@ -14,6 +14,11 @@
     <van-button type="danger" plain>朴素按钮</van-button>
   </demo-block>
 
+  <demo-block title="细边框" padding>
+    <van-button type="primary" plain hairline class="demo-margin-right">细边框按钮</van-button>
+    <van-button type="danger" plain hairline>细边框按钮</van-button>
+  </demo-block>
+
   <demo-block title="禁用状态" padding>
     <van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
     <van-button type="danger" disabled>禁用状态</van-button>

packages/button/README.md

@@ -24,11 +24,22 @@
 
 #### 朴素按钮
 
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
+
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
 <van-button plain type="danger">朴素按钮</van-button>
 ```
 
+#### 细边框
+
+设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+
+```html
+<van-button plain hairline type="primary">细边框按钮</van-button>
+<van-button plain hairline type="danger">细边框按钮</van-button>
+```
+
 #### 禁用状态
 
 通过`disabled`属性来禁用按钮，此时按钮不可点击
@@ -74,6 +85,7 @@
 | round | 是否为圆形按钮 | `Boolean` | `false` |
 | square | 是否为方形按钮 | `Boolean` | `false` |
 | disabled | 是否禁用按钮 | `Boolean` | `false` |
+| hairline | 是否使用 0.5px 边框 | `Boolean` | `false` |
 | loading | 是否显示为加载状态 | `Boolean` | `false` |
 | loading-text | 加载状态提示文字 | `String` | - |
 | loading-size | 加载图标大小 | `String` | `20px` |

packages/button/index.less

@@ -8,13 +8,13 @@
   font-size: 16px;
   line-height: 42px;
   text-align: center;
-  -webkit-text-size-adjust: 100%;
   vertical-align: middle;
-  border-radius: 2px;
   box-sizing: border-box;
+  border-radius: @button-border-radius;
   -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
 
-  &::after {
+  &::before {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -29,7 +29,12 @@
     transform: translate(-50%, -50%);
   }
 
-  &--active::after {
+  // reset weapp default border
+  &::after {
+    border-width: 0;
+  }
+
+  &--active::before {
     opacity: 0.15;
   }
 
@@ -125,7 +130,7 @@
   }
 
   &--round {
-    border-radius: 10em;
+    border-radius: @button-round-border-radius;
   }
 
   &--square {
@@ -141,4 +146,23 @@
     display: inline-block;
     vertical-align: middle;
   }
+
+  &--hairline {
+    border-width: 0;
+    padding-top: 1px; // add 1px padding for text vertical align middle
+
+    &::after {
+      border-width: 1px;
+      border-color: inherit;
+      border-radius: @button-border-radius * 2;
+    }
+
+    &.van-button--round::after {
+      border-radius: @button-round-border-radius;
+    }
+
+    &.van-button--square::after {
+      border-radius: 0;
+    }
+  }
 }

packages/button/index.ts

@@ -13,6 +13,7 @@ VantComponent({
     round: Boolean,
     square: Boolean,
     loading: Boolean,
+    hairline: Boolean,
     disabled: Boolean,
     loadingText: String,
     type: {

packages/button/index.wxml

@@ -2,7 +2,7 @@
 
 <button
   id="{{ id }}"
-  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, unclickable: disabled || loading }]) }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
   open-type="{{ openType }}"
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"

packages/common/style/var.less

@@ -39,6 +39,8 @@
 @button-bottom-action-default-background-color: @orange;
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
+@button-border-radius: 2px;
+@button-round-border-radius: 10em;
 
 // Checkbox
 @checkbox-size: 20px;