Checkbox add border prop

examples/routers/checkbox.vue

@@ -56,6 +56,28 @@
             <Checkbox label="苹果"></Checkbox>
             <Checkbox label="西瓜"></Checkbox>
         </CheckboxGroup>
+        <Divider></Divider>
+        <CheckboxGroup v-model="fruit" size="small">
+            <Checkbox label="香蕉" border></Checkbox>
+            <Checkbox label="苹果" border></Checkbox>
+            <Checkbox label="西瓜" border></Checkbox>
+        </CheckboxGroup>
+        <br>
+        <CheckboxGroup v-model="fruit" size="default">
+            <Checkbox label="香蕉" border></Checkbox>
+            <Checkbox label="苹果" border disabled></Checkbox>
+            <Checkbox label="西瓜" border></Checkbox>
+        </CheckboxGroup>
+        <br>
+        <CheckboxGroup v-model="fruit" size="large">
+            <Checkbox label="香蕉" border></Checkbox>
+            <Checkbox label="苹果" border></Checkbox>
+            <Checkbox label="西瓜" border></Checkbox>
+        </CheckboxGroup>
+        <Divider></Divider>
+        <Checkbox v-model="single" size="small" border>单独</Checkbox>
+        <Checkbox v-model="single" size="default" border disabled>单独</Checkbox>
+        <Checkbox v-model="single" size="large" border>单独</Checkbox>
     </div>
 </template>
 <script>
@@ -69,7 +91,8 @@
                 testValue2: null,
                 indeterminate: true,
                 checkAll: false,
-                checkAllGroup: ['香蕉', '西瓜']
+                checkAllGroup: ['香蕉', '西瓜'],
+                single: false
             };
         },
         methods: {

src/components/checkbox/checkbox.vue

@@ -70,6 +70,11 @@
             },
             name: {
                 type: String
+            },
+            // 4.0.0
+            border: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -90,7 +95,8 @@
                         [`${prefixCls}-group-item`]: this.group,
                         [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-border`]: this.border
                     }
                 ];
             },

src/styles/mixins/checkbox.less

@@ -91,6 +91,31 @@
                 cursor: @cursor-disabled;
             }
         }
+        &-border{
+            border: 1px solid @border-color-base;
+            border-radius: @btn-border-radius;
+            height: @btn-height-base;
+            line-height: @btn-height-base - 2px;
+            padding: @btn-padding-base;
+            transition: border @transition-time @ease-in-out;
+        }
+        &-small&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-small &-border{
+            height: @btn-height-small;
+            line-height: @btn-height-small - 2px;
+            padding: @btn-padding-small;
+        }
+        &-large&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-large &-border{
+            height: @btn-height-large;
+            line-height: @btn-height-large - 4px;
+            padding: @btn-padding-large;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper-checked.@{checkbox-prefix-cls}-border{
+        border-color: @primary-color;
+    }
+    .@{checkbox-prefix-cls}-wrapper-disabled.@{checkbox-prefix-cls}-border{
+        border-color: @btn-disable-border;
     }
 
     // 选中状态