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 @@
-
+
@@ -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;