diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md index ff9e925ea..64943aaae 100644 --- a/examples/docs/en-US/switch.md +++ b/examples/docs/en-US/switch.md @@ -122,10 +122,13 @@ on-value | switch value when in `on` state | boolean / string / number | — | off-value | switch value when in `off` state | boolean / string / number | — | false on-color | background color when in `on` state | string | — | #20A0FF off-color | background color when in `off` state | string | — | #C0CCDA -name| input name of Switch | string | — | — +name | input name of Switch | string | — | — +allow-focus | allow `.focus()` & `.blur()` methods on the `input` $ref | boolean | — | false ### Events Event Name | Description | Parameters ---- | ----| ---- -change | triggers when value changes | value after changing +change | triggers when value changes | (value: Boolean) +blur | triggers on blur (if `allowFocus` is `true`) | (event: Event) +focus | triggers on focus (if `allowFocus` is `true`) | (event: Event) diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue index aaf9381f0..0684a83e6 100644 --- a/packages/switch/src/component.vue +++ b/packages/switch/src/component.vue @@ -3,14 +3,17 @@ <div class="el-switch__mask" v-show="disabled"></div> <input class="el-switch__input" + :class="{ 'allow-focus': allowFocus }" type="checkbox" @change="handleChange" + @focus="handleFocus" + @blur="handleBlur" ref="input" :name="name" :true-value="onValue" :false-value="offValue" :disabled="disabled"> - <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }"> + <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }" @click="setFocus"> <span class="el-switch__button" :style="{ transform }"></span> </span> <transition name="label-fade"> @@ -85,6 +88,10 @@ name: { type: String, default: '' + }, + allowFocus: { + type: Boolean, + default: false } }, data() { @@ -131,6 +138,22 @@ let newColor = this.checked ? this.onColor : this.offColor; this.$refs.core.style.borderColor = newColor; this.$refs.core.style.backgroundColor = newColor; + }, + setFocus() { + // set focus on input + if (this.allowFocus) { + this.$refs.input.focus(); + } + }, + handleBlur(event) { + if (this.allowFocus) { + this.$emit('blur', event); + } + }, + handleFocus(event) { + if (this.allowFocus) { + this.$emit('focus', event); + } } }, mounted() { diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 02de8b845..fc4f0ee8f 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -400,6 +400,7 @@ --switch-width: 46px; --switch-height: 22px; --switch-button-size: 16px; + --switch-focus-border: var(--color-primary); /* Dialog -------------------------- */ diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css index 19cd97107..8e39225e7 100644 --- a/packages/theme-default/src/switch.css +++ b/packages/theme-default/src/switch.css @@ -26,6 +26,8 @@ display: inline-block; font-size: var(--switch-font-size); cursor: pointer; + z-index: 2; + @m left { i { left: 6px; @@ -48,6 +50,22 @@ @e input { display: none; + + &.allow-focus { + z-index: 0; + display: initial; + position: absolute; + left: 0; + top: 0; + outline: none; + opacity: 0; + + &:focus { + + .el-switch__core { + box-shadow: 0 0 2px var(--switch-focus-border); + } + } + } } @e core { @@ -62,6 +80,7 @@ background: var(--switch-off-color); cursor: pointer; transition: border-color .3s, background-color .3s; + z-index: 1; & .el-switch__button { position: absolute 0 * * 0;