Checkbox add size prop

梁灏
1 parent 3485243a
Showing 5 changed files with 99 additions and 7 deletions Show diff stats
examples/routers/checkbox.vue
src/components/button/button.vue
src/components/checkbox/checkbox-group.vue
src/components/checkbox/checkbox.vue
src/styles/mixins/checkbox.less
 <template>
     <div>
+        <Checkbox
+            :indeterminate="true"
+            :value="false"
+            size="large">全选</Checkbox>
+        <Checkbox
+                :indeterminate="true"
+                :value="false"
+                size="default">全选</Checkbox>
+        <Checkbox
+                :indeterminate="true"
+                :value="false"
+                size="small">全选</Checkbox>
         <div>
-            <Checkbox true-value="true" false-value="false" v-model="testValue1">test string</Checkbox>
+            <Checkbox size="large" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
+            <Checkbox true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
+            <Checkbox size="small" true-value="true" false-value="false" v-model="testValue1">Apple</Checkbox>
             {{ testValue1 }}
         </div>
         <div>
             <Checkbox :true-value="0" :false-value="1" v-model="testValue2">test number</Checkbox>
             {{ testValue2 }}
         </div>
-        <Checkbox-group v-model="fruit">
+        <Checkbox-group v-model="fruit" size="large">
             <Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
         </Checkbox-group>
         <div>{{ fruit }}</div>
@@ -27,7 +27,7 @@
             },
             size: {
                 validator (value) {
-                    return oneOf(value, ['small', 'large']);
+                    return oneOf(value, ['small', 'large', 'default']);
                 }
             },
             loading: Boolean,
@@ -4,7 +4,7 @@
     </div>
 </template>
 <script>
-    import { findComponentsDownward } from '../../utils/assist';
+    import { findComponentsDownward, oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     const prefixCls = 'ivu-checkbox-group';
@@ -17,6 +17,11 @@
                 default () {
                     return [];
                 }
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                }
             }
         },
         data () {
@@ -27,7 +32,12 @@
         },
         computed: {
             classes () {
-                return `${prefixCls}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`ivu-checkbox-${this.size}`]: !!this.size
+                    }
+                ];
             }
         },
         mounted () {
@@ -22,7 +22,7 @@
     </label>
 </template>
 <script>
-    import { findComponentUpward } from '../../utils/assist';
+    import { findComponentUpward, oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     const prefixCls = 'ivu-checkbox';
@@ -53,6 +53,11 @@
             indeterminate: {
                 type: Boolean,
                 default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                }
             }
         },
         data () {
@@ -71,7 +76,8 @@
                     {
                         [`${prefixCls}-group-item`]: this.group,
                         [`${prefixCls}-wrapper-checked`]: this.currentValue,
-                        [`${prefixCls}-wrapper-disabled`]: this.disabled
+                        [`${prefixCls}-wrapper-disabled`]: this.disabled,
+                        [`${prefixCls}-${this.size}`]: !!this.size
                     }
                 ];
             },
@@ -48,6 +48,28 @@
                 transition: all @transition-time @ease-in-out;
             }
         }
+        &-large{
+            font-size: 16px;
+            & .@{checkbox-inner-prefix-cls} {
+                width: 16px;
+                height: 16px;
+                &:after{
+                    width: 5px;
+                    height: 9px;
+                }
+            }
+        }
+        &-small{
+            font-size: 12px;
+            & .@{checkbox-inner-prefix-cls} {
+                width: 12px;
+                height: 12px;
+                &:after{
+                    top: 0;
+                    left: 3px;
+                }
+            }
+        }
         &-input {
             width: 100%;
@@ -96,6 +118,26 @@
             }
         }
     }
+    .@{checkbox-prefix-cls}-large{
+        .@{checkbox-prefix-cls}-checked{
+            .@{checkbox-inner-prefix-cls} {
+                &:after{
+                    width: 5px;
+                    height: 9px;
+                }
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-small{
+        .@{checkbox-prefix-cls}-checked{
+            .@{checkbox-inner-prefix-cls} {
+                &:after{
+                    top: 0;
+                    left: 3px;
+                }
+            }
+        }
+    }
     // 禁用
     .@{checkbox-prefix-cls}-disabled {
@@ -164,6 +206,22 @@
             border-color: @primary-color;
         }
     }
+    .@{checkbox-prefix-cls}-large {
+        .@{checkbox-prefix-cls}-indeterminate{
+            .@{checkbox-inner-prefix-cls}:after{
+                width: 10px;
+                top: 6px;
+            }
+        }
+    }
+    .@{checkbox-prefix-cls}-small {
+        .@{checkbox-prefix-cls}-indeterminate{
+            .@{checkbox-inner-prefix-cls}:after{
+                width: 6px;
+                top: 4px;
+            }
+        }
+    }
     .@{checkbox-prefix-cls}-wrapper {
         cursor: pointer;
@@ -173,6 +231,10 @@
         &-disabled{
             cursor: @cursor-disabled;
         }
+
+        &.@{checkbox-prefix-cls}-large{
+            font-size: @font-size-base;
+        }
     }
     .@{checkbox-prefix-cls}-wrapper + span,