From e87939165e3711c48bd4e1e594d5892b56f8290c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sun, 15 Sep 2019 11:34:15 +0800
Subject: [PATCH] Radio add border prop

---
 examples/routers/radio.vue       | 22 +++++++++++++---------
 src/components/radio/radio.vue   |  8 +++++++-
 src/styles/components/radio.less | 26 ++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/examples/routers/radio.vue b/examples/routers/radio.vue
index 1906dacf..ffc7e2e4 100644
--- a/examples/routers/radio.vue
+++ b/examples/routers/radio.vue
@@ -3,6 +3,10 @@
         <Radio size="large" v-model="single">Radio</Radio>
         <Radio size="default" v-model="single">Radio</Radio>
         <Radio size="small" v-model="single">Radio</Radio>
+        <br>
+        <Radio size="large" v-model="single" border>Radio</Radio>
+        <Radio size="default" v-model="single" border disabled>Radio</Radio>
+        <Radio size="small" v-model="single" border>Radio</Radio>
         <br><br>
         <Radio-group v-model="phone">
             <Radio label="apple">
@@ -38,42 +42,42 @@
         </Radio-group>
         <Divider></Divider>
         <Radio-group v-model="phone" size="small">
-            <Radio label="apple">
+            <Radio label="apple" border>
                 <Icon type="logo-apple"></Icon>
                 <span>选项一</span>
             </Radio>
-            <Radio label="android">
+            <Radio label="android" border>
                 <Icon type="logo-android"></Icon>
                 <span>选项二</span>
             </Radio>
-            <Radio label="windows">
+            <Radio label="windows" border>
                 <Icon type="logo-windows"></Icon>
                 <span>选项三</span>
             </Radio>
         </Radio-group>
         <br><br>
         <Radio-group v-model="phone" size="default">
-            <Radio label="apple">
+            <Radio label="apple" border>
                 <span>选项一</span>
             </Radio>
-            <Radio label="android">
+            <Radio label="android" border disabled>
                 <span>选项二</span>
             </Radio>
-            <Radio label="windows">
+            <Radio label="windows" border>
                 <span>选项三</span>
             </Radio>
         </Radio-group>
         <br><br>
         <Radio-group v-model="phone" size="large">
-            <Radio label="apple">
+            <Radio label="apple" border>
                 <Icon type="logo-apple"></Icon>
                 <span>选项一</span>
             </Radio>
-            <Radio label="android">
+            <Radio label="android" border>
                 <Icon type="logo-android"></Icon>
                 <span>选项二</span>
             </Radio>
-            <Radio label="windows">
+            <Radio label="windows" border>
                 <Icon type="logo-windows"></Icon>
                 <span>选项三</span>
             </Radio>
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index f855e42a..d57e10d3 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -53,6 +53,11 @@
             },
             name: {
                 type: String
+            },
+            // 4.0.0
+            border: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -74,7 +79,8 @@
                         [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled,
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-focus`]: this.focusWrapper
+                        [`${prefixCls}-focus`]: this.focusWrapper,
+                        [`${prefixCls}-border`]: this.border
                     }
                 ];
             },
diff --git a/src/styles/components/radio.less b/src/styles/components/radio.less
index e806e171..f1b7778d 100644
--- a/src/styles/components/radio.less
+++ b/src/styles/components/radio.less
@@ -115,6 +115,32 @@
         opacity: 0;
         cursor: pointer;
     }
+
+    &-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, .@{radio-group-prefix-cls}-small &-border{
+        height: @btn-height-small;
+        line-height: @btn-height-small - 2px;
+        padding: @btn-padding-small;
+    }
+    &-large&-border, .@{radio-group-prefix-cls}-large &-border{
+        height: @btn-height-large;
+        line-height: @btn-height-large - 4px;
+        padding: @btn-padding-large;
+    }
+}
+
+.@{radio-prefix-cls}-wrapper-checked.@{radio-prefix-cls}-border{
+    border-color: @primary-color;
+}
+.@{radio-prefix-cls}-wrapper-disabled.@{radio-prefix-cls}-border{
+    border-color: @btn-disable-border;
 }
 
 // 选中状态 - Selected state