Button add 4 new type

Button add 4 new type

Button add 4 new type
梁灏
1 parent 9084eb18
Showing 5 changed files with 34 additions and 1 deletions Show diff stats
assets/iview.png
src/components/button/button.vue
src/styles/components/button.less
src/styles/mixins/button.less
test/routers/button.vue
@@ -17,7 +17,7 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text']);
+                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
                 }
             },
             shape: {
@@ -46,6 +46,22 @@
         .btn-text;
     }
  
+    &-success {
+        .btn-color(@success-color);
+    }
+
+    &-warning {
+        .btn-color(@warning-color);
+    }
+
+    &-error {
+        .btn-color(@error-color);
+    }
+
+    &-info {
+        .btn-color(@info-color);
+    }
+
     //&-dashed {
     //    .btn-dashed;
     //}
@@ -248,6 +248,18 @@
     }
 }
  
+// Color
+.btn-color(@color) {
+    .button-variant(@btn-primary-color; @color; @color);
+
+    &:hover,
+        //&:focus,
+    &:active,
+    &.active {
+        color: @btn-primary-color;
+    }
+}
+
 // Circle for Icon
 .btn-circle(@btnClassName: ivu-btn) {
     border-radius: @btn-circle-size;
 <template>
     <h4>基本</h4>
     <br><br>
+    <i-button type="success">按钮</i-button>
+    <i-button type="warning">按钮</i-button>
+    <i-button type="error">按钮</i-button>
+    <i-button type="info">按钮</i-button>
+    <br><br>
     <Button-group>
         <i-button>取消</i-button>
         <i-button type="primary">确定</i-button>