diff --git a/examples/routers/checkbox.vue b/examples/routers/checkbox.vue index e1a942d..79f3e8b 100644 --- a/examples/routers/checkbox.vue +++ b/examples/routers/checkbox.vue @@ -37,7 +37,7 @@ tags: [], testValue1: null, testValue2: null - } + }; }, mounted () { setTimeout(() => { @@ -51,8 +51,8 @@ { label: '西瓜' } - ] + ]; }, 1000); } - } + }; </script> diff --git a/src/components/checkbox/checkbox-group.vue b/src/components/checkbox/checkbox-group.vue index dd5e079..ee12cbd 100644 --- a/src/components/checkbox/checkbox-group.vue +++ b/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; diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 427f7bb..f61c573 100644 --- a/src/components/checkbox/checkbox.vue +++ b/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> + <span :class="innerClasses" ref="inner"></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(); } } }; diff --git a/src/styles/mixins/checkbox.less b/src/styles/mixins/checkbox.less index 883d877..17852fe 100644 --- a/src/styles/mixins/checkbox.less +++ b/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; -- libgit2 0.21.4