Merge pull request #2868 from Xotic750/checkbox_tabindex

Checkbox w3c

examples/routers/checkbox.vue

@@ -37,7 +37,7 @@
                 tags: [],
                 testValue1: null,
                 testValue2: null
-            }
+            };
         },
         mounted () {
             setTimeout(() => {
@@ -51,8 +51,8 @@
                     {
                         label: '西瓜'
                     }
-                ]
+                ];
             }, 1000);
         }
-    }
+    };
 </script>

src/components/checkbox/checkbox-group.vue

@@ -6,6 +6,7 @@
 <script>
     import { findComponentsDownward, oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
+
     const prefixCls = 'ivu-checkbox-group';
 
     export default {
@@ -45,10 +46,9 @@
         },
         methods: {
             updateModel (update) {
-                const value = this.value;
                 this.childrens = findComponentsDownward(this, 'Checkbox');
-
                 if (this.childrens) {
+                    const { value } = this;
                     this.childrens.forEach(child => {
                         child.model = value;
 

src/components/checkbox/checkbox.vue

@@ -1,33 +1,28 @@
 <template>
-    <label 
-        :class="wrapClasses" 
-        @keydown.space.prevent="$el.click()"
-        :tabindex="disabled ? -1 : 0">
+    <label :class="wrapClasses">
         <span :class="checkboxClasses">
             <span :class="innerClasses"></span>
             <input
                 v-if="group"
                 type="checkbox"
-                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :value="label"
                 v-model="model"
                 :name="name"
                 @change="change"
-                @focus="$el.focus()"
-            >
+                @focus="onFocus"
+                @blur="onBlur">
             <input
-                v-if="!group"
+                v-else
                 type="checkbox"
-                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
                 :name="name"
                 @change="change"
-                @focus="$el.focus()"
-            >
+                @focus="onFocus"
+                @blur="onBlur">
         </span>
         <slot><span v-if="showSlot">{{ label }}</span></slot>
     </label>
@@ -80,7 +75,8 @@
                 currentValue: this.value,
                 group: false,
                 showSlot: true,
-                parent: findComponentUpward(this, 'CheckboxGroup')
+                parent: findComponentUpward(this, 'CheckboxGroup'),
+                focusInner: false
             };
         },
         computed: {
@@ -106,7 +102,12 @@
                 ];
             },
             innerClasses () {
-                return `${prefixCls}-inner`;
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-focus`]: this.focusInner
+                    }
+                ];
             },
             inputClasses () {
                 return `${prefixCls}-input`;
@@ -114,12 +115,15 @@
         },
         mounted () {
             this.parent = findComponentUpward(this, 'CheckboxGroup');
-            if (this.parent) this.group = true;
-            if (!this.group) {
+            if (this.parent) {
+                this.group = true;
+            }
+
+            if (this.group) {
+                this.parent.updateModel(true);
+            } else {
                 this.updateModel();
                 this.showSlot = this.$slots.default !== undefined;
-            } else {
-                this.parent.updateModel(true);
             }
         },
         methods: {
@@ -131,7 +135,7 @@
                 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) {
@@ -143,14 +147,21 @@
             },
             updateModel () {
                 this.currentValue = this.value === this.trueValue;
+            },
+            onBlur () {
+                this.focusInner = false;
+            },
+            onFocus () {
+                this.focusInner = true;
             }
         },
         watch: {
             value (val) {
-                if (val !== this.trueValue && val !== this.falseValue) {
+                if (val === this.trueValue || val === this.falseValue) {
+                    this.updateModel();
+                } else {
                     throw 'Value should be trueValue or falseValue.';
                 }
-                this.updateModel();
             }
         }
     };

src/styles/mixins/checkbox.less

@@ -1,13 +1,18 @@
 .checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
     @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
 
+    .@{checkbox-prefix-cls}-focus {
+        box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+        z-index: 1;
+    }
+
     // 普通状态
     .@{checkbox-prefix-cls} {
         display: inline-block;
         vertical-align: middle;
         white-space: nowrap;
         cursor: pointer;
-        outline: none;
+        //outline: none;
         line-height: 1;
         position: relative;
 
@@ -236,13 +241,7 @@
         font-size: @font-size-small;
         display: inline-block;
         margin-right: 8px;
-        outline: 0;
-        &:focus,
-        &:active {
-            & .@{checkbox-prefix-cls}-inner {
-                box-shadow: 0 0 0 2px fade(@primary-color, 20%);
-            }
-        }
+        //outline: none;
 
         &-disabled{
             cursor: @cursor-disabled;