feat: btn

src/packages/button/button.scss

@@ -5,6 +5,9 @@
 }
 
 .nut-button {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
   cursor: pointer;
   height: $btn-height-big;
   padding: 0 $btn-height-big;
@@ -13,23 +16,44 @@
   color: $btn-gradient-color;
   background: $btn-gradient-bg;
   border: none;
-  box-sizing: border-box;
+  border-radius: $btn-border-radius-base;
+  transition: opacity .2s;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    border: inherit;
+    border-color: black;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: .1;
+  }
 
   &[disabled] {
     cursor: not-allowed;
     background: $btn-disable-bg;
-    color: $btn-disable-color;
+    color: $btn-gradient-color;
   }
 
   // type-label
   .txt-icon {
     vertical-align: text-top;
-    width: $btn-icon-height-big;
-    height: $btn-icon-height-big;
     margin-right: $btn-icon-margin;
     color: $primary-color;
   }
-
+  &.bottom{
+    background: $btn-primary-color;
+    border: $border-width-base solid $split-line-color;
+    color: $text-black-3;    
+  }
   &.red {
     background: $btn-default-bg;
     border: $border-width-base solid $primary-color;
@@ -63,13 +87,11 @@
     color: $title-color;
     border: $border-width-base solid $btn-default-border;
   }
-
   &.actived {
     background: $btn-label-light-bg;
     color: $primary-color;
     border: $border-width-base solid $primary-color;
-  }
-
+  }  
   &.dashed {
     background: $btn-default-bg;
     color: $title-color;
@@ -81,7 +103,18 @@
     width: 100%;
     border-radius: 0;
   }
-
+  // size-大号
+  &.big {
+    height: $btn-height-big;
+    padding: 0 $btn-height-big/2;
+    font-size: $font-size-big;
+  }
+  // size-中号
+  &.middle {
+    height: $btn-height-middle;
+    padding: 0 $btn-height-middle/2;
+    font-size: $font-size-middle;
+  }
   // size-小号
   &.small {
     height: $btn-height-small;
@@ -89,17 +122,26 @@
     font-size: $font-size-small;
   }
 
-  &.no-txt-small {
-    width: $btn-height-small;
+
+
+  &.no-txt-big {
+    width: $btn-height-big;
     padding: 0;
 
     .txt-icon {
       margin: 0;
     }
   }
+  &.no-tx-middle {
+    width: $btn-height-middle;
+    padding: 0;
 
-  &.no-txt {
-    width: $btn-height-big;
+    .txt-icon {
+      margin: 0;
+    }
+  }
+  &.no-txt-small {
+    width: $btn-height-small;
     padding: 0;
 
     .txt-icon {

src/packages/button/button.vue

@@ -31,9 +31,9 @@ export default {
       type: Boolean,
       default: false
     },
-    small: {
-      type: Boolean,
-      default: false
+    size: {
+      type: String,
+      default: 'big'
     },
     label: {
       type: Boolean,
@@ -50,10 +50,10 @@ export default {
   computed: {
     clsStyle() {
       let cls = `nut-button ${this.type} ${this.shape} 
-            ${this.small ? ' small' : ''} 
+            ${this.size} 
             ${this.block ? ' block' : ''} 
             ${this.label ? ' label' : ''}
-            ${!this.$slots.default ? (this.small ? 'no-txt-small' : 'no-txt') : ''}`;
+            ${!this.$slots.default ? `no-txt-${this.size}` : ''}`;
       return cls;
     }
   },

src/packages/button/demo.vue

@@ -1,5 +1,34 @@
 <template>
   <div>
+    <h4>按钮状态</h4>
+    <div class="btn-state">
+      <nut-button block>默认状态</nut-button>
+      <nut-button block>点击状态</nut-button>
+      <nut-button disabled block>不可点击状态</nut-button>
+    </div>
+    <h4>按钮尺寸</h4>
+    <div class="btn-size">
+      <nut-button size="big">大号按钮</nut-button>
+      <nut-button size="middle">中号按钮</nut-button>
+      <nut-button size="small">小号按钮</nut-button>
+    </div>
+
+    <h4>底部分栏按钮</h4>
+    <div class="btn-size two">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle">按钮B</nut-button>
+    </div>
+    <div class="btn-size three">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle" type="bottom">按钮B</nut-button>
+      <nut-button size="middle" type="bottom">按钮C</nut-button>
+    </div>
+    <div class="btn-size four">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle" type="bottom">按钮B</nut-button>
+      <nut-button size="middle" type="bottom">按钮C</nut-button>
+      <nut-button size="middle" type="bottom">更多</nut-button>
+    </div>
     <h4>常规按钮</h4>
     <div class="bg">
       <nut-button @click="clickHandler" :disabled="disabled">去结算</nut-button>
@@ -23,22 +52,22 @@
 
     <h4>圆角按钮-常规Button</h4>
     <div class="white-bg">
-      <nut-button type="red" shape="circle" small>确认收货</nut-button>
-      <nut-button type="gray" shape="circle" small>查看物流</nut-button>
-      <nut-button type="default" shape="circle" small>再次购买</nut-button>
-      <nut-button type="light" shape="circle" small>降价通知</nut-button>
+      <nut-button type="red" shape="circle" size="small">确认收货</nut-button>
+      <nut-button type="gray" shape="circle" size="small">查看物流</nut-button>
+      <nut-button type="default" shape="circle" size="small">再次购买</nut-button>
+      <nut-button type="light" shape="circle" size="small">降价通知</nut-button>
     </div>
 
     <h4>圆角按钮-标签Button</h4>
     <div class="white-bg">
-      <nut-button type="primary" shape="circle" small>京东快递</nut-button>
-      <nut-button type="lightred" shape="circle" small>好评 6.6万</nut-button>
-      <nut-button type="actived" shape="circle" icon="tick" small>全部 100万</nut-button>
+      <nut-button type="primary" shape="circle" size="small">京东快递</nut-button>
+      <nut-button type="lightred" shape="circle" size="small">好评 6.6万</nut-button>
+      <nut-button type="actived" shape="circle" icon="tick" size="small">全部 100万</nut-button>
     </div>
 
     <h4>图标按钮-小</h4>
     <div class="white-bg">
-      <nut-button type="actived" shape="circle" icon="tick" small></nut-button>
+      <nut-button type="actived" shape="circle" icon="tick" size="small"></nut-button>
     </div>
 
     <h4>图标按钮-大</h4>
@@ -48,17 +77,17 @@
 
     <h4>圆角按钮-商品属性选择Button</h4>
     <div class="white-bg">
-      <nut-button type="actived" shape="circle" small>象牙白</nut-button>
-      <nut-button type="light" shape="circle" small>皓月灰</nut-button>
-      <nut-button type="dashed" shape="circle" small>晶钻蓝</nut-button>
+      <nut-button type="actived" shape="circle" size="small">象牙白</nut-button>
+      <nut-button type="light" shape="circle" size="small">皓月灰</nut-button>
+      <nut-button type="dashed" shape="circle" size="small">晶钻蓝</nut-button>
     </div>
 
     <h4>自定义颜色</h4>
     <div class="white-bg">
-      <nut-button type="actived" shape="circle" small color="#fff">象牙白</nut-button>
-      <nut-button type="primary" shape="circle" small color="rgb(0,0,0)">象牙白</nut-button>
-      <nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small></nut-button>
-      <nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small>全部 100万</nut-button>
+      <nut-button type="actived" shape="circle" size="small" color="#fff">象牙白</nut-button>
+      <nut-button type="primary" shape="circle" size="small" color="rgb(0,0,0)">象牙白</nut-button>
+      <nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" size="small"></nut-button>
+      <nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" size="small">全部 100万</nut-button>
     </div>
   </div>
 </template>
@@ -94,4 +123,33 @@ export default {
   padding: 10px;
   background: #fff;
 }
+.btn-state {
+  button {
+    margin-bottom: 10px;
+  }
+}
+.btn-size {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  margin-top: 24px;
+  &.two {
+    button {
+      width: 168px;
+    }
+  }
+  &.three {
+    button {
+      width: 109px;
+    }
+  }
+  &.four {
+    button {
+      width: 79px;
+    }
+    .middle {
+      padding: 0;
+    }
+  }
+}
 </style>

src/packages/button/doc.md

@@ -2,6 +2,78 @@
 
 ## 基本用法 
 
+按钮状态
+```html
+    <div class="btn-state">
+      <nut-button block>默认状态</nut-button>
+      <nut-button block>点击状态</nut-button>
+      <nut-button disabled block>不可点击状态</nut-button>
+    </div>
+```
+```scss
+.btn-state {
+  button {
+    margin-bottom: 10px;
+  }
+}
+```
+按钮尺寸
+```html
+    <div class="btn-size">
+      <nut-button size="big">大号按钮</nut-button>
+      <nut-button size="middle">中号按钮</nut-button>
+      <nut-button size="small">小号按钮</nut-button>
+    </div>
+```
+底部分栏按钮
+```html
+    <div class="btn-size two">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle">按钮B</nut-button>
+    </div>
+    <div class="btn-size three">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle" type="bottom">按钮B</nut-button>
+      <nut-button size="middle" type="bottom">按钮C</nut-button>
+    </div>
+    <div class="btn-size four">
+      <nut-button size="middle" type="bottom">按钮A</nut-button>
+      <nut-button size="middle" type="bottom">按钮B</nut-button>
+      <nut-button size="middle" type="bottom">按钮C</nut-button>
+      <nut-button size="middle" type="bottom">更多</nut-button>
+    </div>
+```
+```scss
+.btn-state {
+  button {
+    margin-bottom: 10px;
+  }
+}
+.btn-size {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  margin-top: 24px;
+  &.two {
+    button {
+      width: 168px;
+    }
+  }
+  &.three {
+    button {
+      width: 109px;
+    }
+  }
+  &.four {
+    button {
+      width: 79px;
+    }
+    .middle {
+      padding: 0;
+    }
+  }
+}
+```
 常规按钮
 
 ```html
@@ -43,13 +115,13 @@ export default {
 
 ```html
 <nut-button 
-  small
+  size="small"
 >
   去结算
 </nut-button>
 
 <nut-button 
-  small 
+  size="small" 
   disabled
 >
   去结算（disabled）
@@ -84,7 +156,7 @@ export default {
 <nut-button 
   type="red" 
   shape="circle" 
-  small
+  size="small"
 >
   确认收货
 </nut-button>
@@ -92,7 +164,7 @@ export default {
 <nut-button 
   type="gray" 
   shape="circle" 
-  small
+  size="small"
 >
   查看物流
 </nut-button>
@@ -100,7 +172,7 @@ export default {
 <nut-button 
   type="default" 
   shape="circle" 
-  small
+  size="small"
 >
   再次购买
 </nut-button>
@@ -108,7 +180,7 @@ export default {
 <nut-button 
   type="light" 
   shape="circle" 
-  small
+  size="small"
 >
   降价通知
 </nut-button>
@@ -120,7 +192,7 @@ export default {
 <nut-button
   type="primary" 
   shape="circle" 
-  small
+  size="small"
 >
   京东快递
 </nut-button>
@@ -128,7 +200,7 @@ export default {
 <nut-button 
   type="lightred" 
   shape="circle" 
-  small
+  size="small"
 >
   好评 6.6万
 </nut-button>
@@ -137,7 +209,7 @@ export default {
   type="actived" 
   shape="circle" 
   icon="tick" 
-  small
+  size="small"
 >
   全部 100万
 </nut-button>
@@ -150,7 +222,7 @@ export default {
   type="actived" 
   shape="circle" 
   icon="tick" 
-  small
+  size="small"
 >
 </nut-button>
 ```
@@ -172,7 +244,7 @@ export default {
 <nut-button 
   type="actived" 
   shape="circle" 
-  small
+  size="small"
 >
   象牙白
 </nut-button>
@@ -180,7 +252,7 @@ export default {
 <nut-button 
   type="light" 
   shape="circle" 
-  small
+  size="small"
 >
   皓月灰
 </nut-button>
@@ -188,7 +260,7 @@ export default {
 <nut-button 
   type="dashed" 
   shape="circle" 
-  small
+  size="small"
 >
   晶钻蓝
 </nut-button>
@@ -200,7 +272,7 @@ export default {
 <nut-button 
   type="actived" 
   shape="circle" 
-  small 
+  size="small" 
   color="#fff"
 >
   象牙白
@@ -209,7 +281,7 @@ export default {
 <nut-button 
   type="primary" 
   shape="circle" 
-  small 
+  size="small" 
   color="rgb(0,0,0)"
 >
   象牙白
@@ -220,7 +292,7 @@ export default {
   shape="circle" 
   icon="tick" 
   color="rgb(0,0,0)" 
-  small
+  size="small"
 >
 </nut-button>
 
@@ -229,7 +301,7 @@ export default {
   shape="circle" 
   icon="tick" 
   color="rgb(0,0,0)" 
-  small
+  size="small"
 >
   全部 100万
 </nut-button>
@@ -239,11 +311,11 @@ export default {
 
 ## Prop
 
-| 字段  | 说明                                                                                      | 类型    | 默认值 |
-| ----- | ----------------------------------------------------------------------------------------- | ------- | ------ |
-| type  | 按钮类型，可选类型包含：空、red、gray、light、lightred、primary、default、actived、dashed | String  | -      |
-| block | 是否为通栏                                                                                | Boolean | false  |
-| small | 是否为小号组件                                                                            | Boolean | false  |
-| shape | 形状配置，可选类型：空、circle                                                            | String  | -      |
-| icon  | 按钮前的图标，参考Icon组件                                                                | String  | -      |
-| color | 自定义颜色，包含文字与图片颜色                                                            | String  | -      |
+| 字段  | 说明                                                                                     | 类型    | 默认值 |
+| ----- | ---------------------------------------------------------------------------------------- | ------- | ------ |
+| type  | 按钮类型，可选类型包含：空/bottom/red/gray/light/lightred/primary/default/actived/dashed | String  | -      |
+| block | 是否为通栏                                                                               | Boolean | false  |
+| size  | large /normal/small                                                                      | String  | normal |
+| shape | 形状配置，可选类型：空、circle                                                           | String  | -      |
+| icon  | 按钮前的图标，参考Icon组件                                                               | String  | -      |
+| color | 自定义颜色，包含文字与图片颜色                                                           | String  | -      |

src/styles/variable.scss

@@ -79,11 +79,12 @@ $shadow-right: 2px 0 8px $shadow-color !default;
 $shadow-base: $shadow-down !default;
 // ---- Buttons ----
 $btn-font-weight: normal !default;
-$btn-border-radius-base: 8px !default;
+$btn-border-radius-base: 4px !default;
 $btn-border-radius-small: 3px !default;
 $btn-border-radius-large: 50px !default;
-$btn-height-small: 30px !default;
-$btn-height-big: 40px !default;
+$btn-height-small: 28px !default;
+$btn-height-middle: 40px !default;
+$btn-height-big: 48px !default;
 $btn-icon-height-small: 12px !default;
 $btn-icon-height-big: 16px !default;
 $btn-menu-icon-height: 20px !default;
@@ -93,7 +94,7 @@ $btn-primary-bg: $primary-color !default;
 $btn-gradient-color: #fff !default;
 $btn-gradient-start-color: #ff4f18;
 $btn-gradient-end-color: #f20000;
-$btn-gradient-bg: linear-gradient(315deg, $btn-gradient-start-color 0%, $btn-gradient-end-color 100%) !default;
+$btn-gradient-bg: $primary-color-jd-red !default;
 $btn-gradient-active-bg: linear-gradient(315deg, darken($btn-gradient-start-color, 10%) 0%, darken($btn-gradient-end-color, 10%) 100%) !default;
 $btn-default-color: $normal-color !default;
 $btn-default-bg: #fff !default;
@@ -101,11 +102,14 @@ $btn-default-border: $border-color-dark !default;
 $btn-active-color: #fff !default;
 $btn-active-bg: $primary-color !default;
 $btn-active-border: 􏰅􏴦􏵘􏵑􏱱􏵘􏴦$primary-color !default;
-$btn-disable-color: $disabled-color !default;
-$btn-disable-bg: $disabled-bg !default;
+$btn-disable-color: $disabled-bg-color !default;
+$btn-disable-bg: $disabled-bg-color !default;
 $btn-disable-border: $disabled-color !default;
 $btn-icon-margin: 5px;
 $btn-label-light-bg: rgba(240, 37, 15, 0.05);
+$font-size-big:18px;
+$font-size-middle:15px;
+$font-size-small:13px;
 // ---- z-index ----
 $zindex-mask: 9998 !default;
 $zindex-actionsheet: 10001 !default;