Radio add size prop

梁灏
1 parent 77f1cc2e
Showing 5 changed files with 73 additions and 21 deletions Show diff stats
examples/routers/radio.vue
src/components/radio/radio-group.vue
src/components/radio/radio.vue
src/styles/components/radio.less
src/styles/mixins/checkbox.less
 <template>
     <div>
-        <Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }}
-        <Radio-group v-model="date.sex">
-            <div v-if="show">
-                <Radio label="male" true-value="true" false-value="false"></Radio>
-                <Radio label="female" true-value="true" false-value="false"></Radio>
-            </div>
+        <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><br>
+        <Radio-group v-model="phone">
+            <Radio label="apple">
+                <Icon type="social-apple"></Icon>
+                <span>Apple</span>
+            </Radio>
+            <Radio label="android">
+                <Icon type="social-android"></Icon>
+                <span>Android</span>
+            </Radio>
+            <Radio label="windows">
+                <Icon type="social-windows"></Icon>
+                <span>Windows</span>
+            </Radio>
+        </Radio-group>
+        <Radio-group v-model="button2" type="button" size="large">
+            <Radio label="北京"></Radio>
+            <Radio label="上海" disabled></Radio>
+            <Radio label="深圳"></Radio>
+            <Radio label="杭州"></Radio>
+        </Radio-group>
+        <Radio-group v-model="button2" type="button" size="default">
+            <Radio label="北京"></Radio>
+            <Radio label="上海" disabled></Radio>
+            <Radio label="深圳"></Radio>
+            <Radio label="杭州"></Radio>
+        </Radio-group>
+        <Radio-group v-model="button2" type="button" size="small">
+            <Radio label="北京"></Radio>
+            <Radio label="上海" disabled></Radio>
+            <Radio label="深圳"></Radio>
+            <Radio label="杭州"></Radio>
         </Radio-group>
-        {{ date }}
-        <Button @click="handleChange">change</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                date: {
-                    sex: 'male'
-                },
-                show: false,
-                testValue: null
+                single: true,
+                phone: 'apple',
+                button2: '北京',
             }
         },
         methods: {
-            handleChange () {
-//                this.date.sex = 'male form';
-                this.show = true;
-            }
+
         }
     }
 </script>
@@ -19,7 +19,7 @@
             },
             size: {
                 validator (value) {
-                    return oneOf(value, ['small', 'large']);
+                    return oneOf(value, ['small', 'large', 'default']);
                 }
             },
             type: {
@@ -44,6 +44,7 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`ivu-radio-${this.size}`]: !!this.size,
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-vertical`]: this.vertical
                     }
@@ -12,7 +12,7 @@
     </label>
 </template>
 <script>
-    import { findComponentUpward } from '../../utils/assist';
+    import { findComponentUpward, oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
  
     const prefixCls = 'ivu-radio';
@@ -39,6 +39,11 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                }
             }
         },
         data () {
@@ -55,7 +60,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
                     }
                 ];
             },
@@ -73,6 +73,30 @@
             transform: scale(0);
         }
     }
+    &-large{
+        font-size: @font-size-base;
+        & .@{radio-inner-prefix-cls}{
+            width: 16px;
+            height: 16px;
+            &:after{
+                width: 10px;
+                height: 10px;
+            }
+        }
+        &.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
+            font-size: @font-size-base;
+        }
+    }
+    &-small{
+        & .@{radio-inner-prefix-cls}{
+            width: 12px;
+            height: 12px;
+            &:after{
+                width: 6px;
+                height: 6px;
+            }
+        }
+    }
  
     &-input {
         position: absolute;
@@ -49,7 +49,6 @@
             }
         }
         &-large{
-            font-size: 16px;
             & .@{checkbox-inner-prefix-cls} {
                 width: 16px;
                 height: 16px;