feat: button功能完善

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
+
+[*.md]
+trim_trailing_whitespace = false

src/packages/button/demo.vue

@@ -11,20 +11,36 @@
       <nut-button type="warning">警告按钮</nut-button>
       <nut-button type="success">成功按钮</nut-button>
     </div>
-    <div class="title">边框按钮</div>
-
+    <div class="title">朴素按钮</div>
+    <div class="demo-button-row2">
+      <nut-button plain type="primary">朴素按钮</nut-button>
+      <nut-button plain type="info">朴素按钮</nut-button>
+    </div>
     <div class="title">禁用状态</div>
-
+    <div class="demo-button-row2">
+      <nut-button disabled type="primary">禁用状态</nut-button>
+      <nut-button plain disabled type="info">禁用状态</nut-button>
+      <nut-button plain disabled type="primary">禁用状态</nut-button>
+    </div>
     <div class="title">按钮形状</div>
-
+    <div class="demo-button-row2">
+      <nut-button shape="square" type="primary">方形按钮</nut-button>
+      <nut-button type="info">圆形按钮</nut-button>
+    </div>
     <div class="title">加载状态</div>
 
     <div class="title">图标按钮</div>
 
     <div class="title">按钮尺寸</div>
-    <nut-button block type="primary">通栏按钮</nut-button>
-    <nut-button>普通按钮</nut-button>
-    <nut-button>小型按钮</nut-button>
+    <div class="demo-button-row2">
+      <div class="demo-button-row2">
+        <nut-button block type="primary">通栏按钮</nut-button>
+      </div>
+      <div class="demo-button-row2">
+        <nut-button type="primary">普通按钮</nut-button>
+        <nut-button size="small" type="primary">小型按钮</nut-button>
+      </div>
+    </div>
   </div>
 </template>
 

src/packages/button/index.scss

@@ -74,28 +74,38 @@
   }
 
   &--plain {
-    background-color: $button-plain-background-color;
+    background: $button-plain-background-color;
 
     &.nut-button--primary {
-      color: $button-primary-background-color;
+      color: $button-primary-border-color;
+      border-color: $button-primary-border-color;
+    }
+
+    &.nut-button--info {
+      color: $button-info-border-color;
+      border-color: $button-info-border-color;
     }
 
     &.nut-button--success {
-      color: $button-success-background-color;
+      color: $button-success-border-color;
+      border-color: $button-success-border-color;
     }
 
     &.nut-button--danger {
-      color: $button-danger-background-color;
+      color: $button-danger-border-color;
+      border-color: $button-danger-border-color;
     }
 
     &.nut-button--warning {
-      color: $button-warning-background-color;
+      color: $button-warning-border-color;
+      border-color: $button-warning-border-color;
     }
   }
 
   &--large {
     width: 100%;
     height: $button-large-height;
+    line-height: $button-large-line-height;
   }
 
   &--normal {
@@ -105,6 +115,7 @@
 
   &--small {
     height: $button-small-height;
+    line-height: $button-small-line-height;
     padding: 0 $padding-xs;
     font-size: $font-size-1;
   }

src/packages/button/index.vue

@@ -65,7 +65,9 @@ export default createComponent('button')({
         [`${prefixCls}--${type.value}`]: type.value,
         [`${prefixCls}--${size.value}`]: size.value,
         [`${prefixCls}--${shape.value}`]: shape.value,
-        [`${prefixCls}--block`]: block.value
+        [`${prefixCls}--plain`]: plain.value,
+        [`${prefixCls}--block`]: block.value,
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
 

src/styles/variables.scss

@@ -27,18 +27,21 @@ $font-weight-bold: 400;
 // button
 $button-border-radius: 25px;
 $button-border-width: 1px;
-$button-default-bg-color: #fff;
+$button-default-bg-color: $white;
 $button-default-border-color: rgba(204, 204, 204, 1);
 $button-default-color: rgba(102, 102, 102, 1);
 $button-small-height: 28px;
 $button-default-height: 38px;
 $button-large-height: 48px;
+$button-large-line-height: 46px;
+$button-small-line-height: 26px;
 $button-block-height: 48px;
 $button-default-line-height: 36px;
 $button-block-line-height: 46px;
 $button-default-font-size: $font-size-2;
 $button-disabled-opacity: 0.68;
-$button-primary-color: #fff;
+$button-primary-color: $white;
+$button-primary-border-color: rgba(250, 44, 25, 1);
 $button-primary-background-color: linear-gradient(
   135deg,
   rgba(250, 44, 25, 1) 0%,
@@ -46,9 +49,11 @@ $button-primary-background-color: linear-gradient(
   rgba(250, 89, 25, 1) 83%,
   rgba(250, 100, 25, 1) 100%
 );
-$button-info-color: #fff;
+$button-info-color: $white;
+$button-info-border-color: rgba(73, 106, 242, 1);
 $button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%);
-$button-success-color: #fff;
+$button-success-color: $white;
+$button-success-border-color: rgba(38, 191, 38, 1);
 $button-success-background-color: linear-gradient(
   135deg,
   rgba(38, 191, 38, 1) 0%,
@@ -57,9 +62,11 @@ $button-success-background-color: linear-gradient(
   rgba(41, 212, 70, 1) 100%
 );
 
-$button-danger-color: #fff;
+$button-danger-color: $white;
+$button-danger-border-color: rgba(250, 44, 25, 1);
 $button-danger-background-color: rgba(250, 44, 25, 1);
-$button-warning-color: #fff;
+$button-warning-color: $white;
+$button-warning-border-color: rgba(255, 158, 13, 1);
 $button-warning-background-color: linear-gradient(
   135deg,
   rgba(255, 158, 13, 1) 0%,
@@ -67,4 +74,4 @@ $button-warning-background-color: linear-gradient(
   rgba(255, 182, 13, 1) 83%,
   rgba(255, 190, 13, 1) 100%
 );
-$button-plain-background-color: #fff;
+$button-plain-background-color: $white;