Merge pull request #2882 from iview/pr/2867

Pr/2867

Merge pull request #2882 from iview/pr/2867
Pr/2867
Aresn · GitHub
2 parents 105af4ee a646fc36
Showing 4 changed files with 125 additions and 54 deletions Show diff stats
examples/routers/radio.vue
src/components/radio/radio-group.vue
src/components/radio/radio.vue
src/styles/components/radio.less
@@ -43,12 +43,12 @@
         data () {
             return {
                 single: true,
-                phone: 'apple',
+                phone: '',
                 button2: '北京',
-            }
+            };
         },
         methods: {
         }
-    }
+    };
 </script>
 <template>
-    <div :class="classes">
+    <div :class="classes" :name="name">
         <slot></slot>
     </div>
 </template>
@@ -9,6 +9,10 @@
     const prefixCls = 'ivu-radio-group';
+    let seed = 0;
+    const now = Date.now();
+    const getUuid = () => `ivuRadioGroup_${now}_${seed++}`;
+
     export default {
         name: 'RadioGroup',
         mixins: [ Emitter ],
@@ -30,6 +34,10 @@
             vertical: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String,
+                default: getUuid
             }
         },
         data () {
@@ -56,12 +64,10 @@
         },
         methods: {
             updateValue () {
-                const value = this.value;
                 this.childrens = findComponentsDownward(this, 'Radio');
-
                 if (this.childrens) {
                     this.childrens.forEach(child => {
-                        child.currentValue = value == child.label;
+                        child.currentValue = this.value === child.label;
                         child.group = true;
                     });
                 }
@@ -76,6 +82,7 @@
         },
         watch: {
             value () {
+                this.currentValue = this.value;
                 this.updateValue();
             }
         }
 <template>
-    <label
-        :class="wrapClasses"
-        :tabindex="disabled ? -1 : 0"
-        @keyup.space="change">
+    <label :class="wrapClasses">
         <span :class="radioClasses">
             <span :class="innerClasses"></span>
             <input
                 type="radio"
-                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
-                :name="name"
+                :name="groupName"
                 @change="change"
-            >
-        </span><slot>{{ label }}</slot>
+                @focus="onFocus"
+                @blur="onBlur">
+        </span>
+        <slot>{{ label }}</slot>
     </label>
 </template>
 <script>
@@ -59,7 +57,10 @@
             return {
                 currentValue: this.value,
                 group: false,
-                parent: findComponentUpward(this, 'RadioGroup')
+                groupName: this.name,
+                parent: findComponentUpward(this, 'RadioGroup'),
+                focusWrapper: false,
+                focusInner: false
             };
         },
         computed: {
@@ -70,7 +71,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}-focus`]: this.focusWrapper
                     }
                 ];
             },
@@ -84,18 +86,35 @@
                 ];
             },
             innerClasses () {
-                return `${prefixCls}-inner`;
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-focus`]: this.focusInner
+                    }
+                ];
             },
             inputClasses () {
                 return `${prefixCls}-input`;
             }
         },
         mounted () {
-            if (this.parent) this.group = true;
-            if (!this.group) {
-                this.updateValue();
-            } else {
+            if (this.parent) {
+                this.group = true;
+                if (this.name && this.name !== this.parent.name) {
+                    /* eslint-disable no-console */
+                    if (console.warn) {
+                        console.warn('[iview] Name does not match Radio Group name.');
+                    }
+                    /* eslint-enable no-console */
+                } else {
+                    this.groupName = this.parent.name; 
+                }
+            }
+
+            if (this.group) {
                 this.parent.updateValue();
+            } else {
+                this.updateValue();
             }
         },
         methods: {
@@ -107,30 +126,43 @@
                 const checked = event.target.checked;
                 this.currentValue = checked;
-                let value = checked ? this.trueValue : this.falseValue;
+                const value = checked ? this.trueValue : this.falseValue;
                 this.$emit('input', value);
-                if (this.group && this.label !== undefined) {
-                    this.parent.change({
-                        value: this.label,
-                        checked: this.value
-                    });
-                }
-                if (!this.group) {
+                if (this.group) {
+                    if (this.label !== undefined) {
+                        this.parent.change({
+                            value: this.label,
+                            checked: this.value
+                        });
+                    }
+                } else {
                     this.$emit('on-change', value);
                     this.dispatch('FormItem', 'on-form-change', value);
                 }
             },
             updateValue () {
                 this.currentValue = this.value === this.trueValue;
+            },
+            onBlur () {
+                this.focusWrapper = false;
+                this.focusInner = false;
+            },
+            onFocus () {
+                if (this.group && this.parent.type === 'button') {
+                    this.focusWrapper = true;
+                } else {
+                    this.focusInner = true;
+                }
             }
         },
         watch: {
             value (val) {
-                if (val !== this.trueValue && val !== this.falseValue) {
+                if (val === this.trueValue || val === this.falseValue) {
+                    this.updateValue();
+                } else {
                     throw 'Value should be trueValue or falseValue.';
                 }
-                this.updateValue();
             }
         }
     };
@@ -3,10 +3,16 @@
 @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
 @radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";
+.@{radio-prefix-cls}-focus {
+    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+    z-index: 1;
+}
+
 .@{radio-group-prefix-cls} {
     display: inline-block;
     font-size: @font-size-small;
     vertical-align: middle;
+    //outline: none;
     &-vertical{
         .@{radio-prefix-cls}-wrapper {
             display: block;
@@ -28,19 +34,14 @@
     &-disabled{
         cursor: @cursor-disabled;
     }
-    outline: 0;
-    &:focus {
-        & .@{radio-inner-prefix-cls} {
-            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
-        }
-    }
+    //outline: none;
 }
 .@{radio-prefix-cls} {
     display: inline-block;
     margin-right: 4px;
     white-space: nowrap;
-    outline: none;
+    //outline: none;
     position: relative;
     line-height: 1;
     vertical-align: middle;
@@ -177,7 +178,7 @@ span.@{radio-prefix-cls} + * {
         height: @btn-circle-size;
         line-height: @btn-circle-size - 2px;
         margin: 0;
-        padding: 0 16px;
+        padding: 0 16px - 1px;
         font-size: @font-size-small;
         color: @btn-default-color;
         transition: all @transition-time ease-in-out;
@@ -185,26 +186,37 @@ span.@{radio-prefix-cls} + * {
         border: 1px solid @border-color-base;
         border-left: 0;
         background: #fff;
+        position: relative;
         > span {
             margin-left: 0;
         }
-        &:before {
+        &:before, &:after {
             content: '';
+            display: block;
             position: absolute;
             width: 1px;
             height: 100%;
             left: -1px;
+            top: 0;
             background: @border-color-base;
-            visibility: hidden;
+            //visibility: hidden;
             transition: all @transition-time ease-in-out;
         }
+        &:after{
+            height: @btn-circle-size + 4px;
+            left: -1px;
+            top: -3px;
+            background: fade(@primary-color, 20%);
+            opacity: 0;
+        }
+
         &:first-child {
             border-radius: @btn-border-radius 0 0 @btn-border-radius;
             border-left: 1px solid @border-color-base;
-            &:before {
+            &:before, &:after {
                 display: none;
             }
         }
@@ -225,10 +237,6 @@ span.@{radio-prefix-cls} + * {
             }
         }
-        &:focus {
-            box-shadow: 0 0 0 2px fade(@primary-color, 20%);
-        }
-
         .@{radio-prefix-cls}-inner,
         input {
             opacity: 0;
@@ -241,25 +249,41 @@ span.@{radio-prefix-cls} + * {
             border-color: @primary-color;
             color: @primary-color;
             box-shadow: -1px 0 0 0 @primary-color;
+            z-index: 1;
+
+            &:before{
+                background: @primary-color;
+                opacity: 0.1;
+            }
+
+            &.@{radio-prefix-cls}-focus{
+                box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
+                transition: all @transition-time ease-in-out;
+                &:after{
+                    left: -3px;
+                    top: -3px;
+                    opacity: 1;
+                    background: fade(@primary-color, 20%);
+                }
+                &:first-child{
+                    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+                }
+            }
             &:first-child {
                 border-color: @primary-color;
-                box-shadow: none!important;
+                box-shadow: none;
             }
             &:hover {
                 border-color: tint(@primary-color, 20%);
-                box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
+                //box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
                 color: tint(@primary-color, 20%);
             }
-            &:focus {
-                box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important;
-            }
-
             &:active {
                 border-color: shade(@primary-color, 5%);
-                box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
+                //box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
                 color: shade(@primary-color, 5%);
             }
         }
@@ -294,6 +318,9 @@ span.@{radio-prefix-cls} + * {
     height: @btn-circle-size-large;
     line-height: @btn-circle-size-large - 2px;
     font-size: @font-size-base;
+    &:after{
+        height: @btn-circle-size-large + 4px;
+    }
 }
 .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
@@ -301,6 +328,11 @@ span.@{radio-prefix-cls} + * {
     line-height: @btn-circle-size-small - 2px;
     padding: 0 12px;
     font-size: @font-size-small;
+
+    &:after{
+        height: @btn-circle-size-small + 4px;
+    }
+
     &:first-child {
         border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
     }