diff --git a/lib/element-ui.common.js b/lib/element-ui.common.js index 6209b8b7f21c6eea447dd4671b7c4cfc1ef5e9c2..a26772af8dcdcbc0e3a6058bda30c7f9f143cd5d 100644 --- a/lib/element-ui.common.js +++ b/lib/element-ui.common.js @@ -21471,14 +21471,8 @@ mainvue_type_template_id_52060272_render._withStripped = true popper.setAttribute('tabindex', 0); if (this.trigger !== 'click') { - Object(dom_["on"])(reference, 'focusin', function () { - _this.handleFocus(); - var instance = reference.__vue__; - if (instance && typeof instance.focus === 'function') { - instance.focus(); - } - }); - Object(dom_["on"])(popper, 'focusin', this.handleFocus); + Object(dom_["on"])(reference, 'focusin', this.handleRefrenceFocus); + Object(dom_["on"])(popper, 'focusin', this.handlePopperFocus); Object(dom_["on"])(reference, 'focusout', this.handleBlur); Object(dom_["on"])(popper, 'focusout', this.handleBlur); } @@ -21524,7 +21518,17 @@ mainvue_type_template_id_52060272_render._withStripped = true doClose: function doClose() { this.showPopper = false; }, - handleFocus: function handleFocus() { + handleRefrenceFocus: function handleRefrenceFocus() { + this.handlePopperFocus(); + if (!this.referenceElm) { + return; + } + const instance = this.referenceElm.__vue__; + if (instance && typeof instance.focus === 'function') { + instance.focus(); + } + }, + handlePopperFocus: function handlePopperFocus() { Object(dom_["addClass"])(this.referenceElm, 'focusing'); if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true; }, @@ -21570,7 +21574,7 @@ mainvue_type_template_id_52060272_render._withStripped = true var popper = this.popper || this.$refs.popper; if (!reference && this.$refs.wrapper.children) { - reference = this.referenceElm = this.$refs.wrapper.children[0]; + reference = this.$refs.wrapper.children[0]; } if (!this.$el || !reference || this.$el.contains(e.target) || reference.contains(e.target) || !popper || popper.contains(e.target)) return; this.showPopper = false; @@ -21590,18 +21594,28 @@ mainvue_type_template_id_52060272_render._withStripped = true }, destroyed: function destroyed() { - var reference = this.reference; + var reference = this.referenceElm; + var popper = this.popper || this.$refs.popper; + Object(dom_["off"])(reference, 'focusin', this.handleRefrenceFocus); + Object(dom_["off"])(popper, 'focusin', this.handlePopperFocus); + Object(dom_["off"])(reference, 'focusout', this.handleBlur); + Object(dom_["off"])(popper, 'focusout', this.handleBlur); + Object(dom_["off"])(reference, 'keydown', this.handleKeydown); + Object(dom_["off"])(reference, 'click', this.handleClick); Object(dom_["off"])(reference, 'click', this.doToggle); + Object(dom_["off"])(document, 'click', this.handleDocumentClick); + Object(dom_["off"])(reference, 'mouseenter', this.handleMouseEnter); + Object(dom_["off"])(popper, 'mouseenter', this.handleMouseEnter); + Object(dom_["off"])(reference, 'mouseleave', this.handleMouseLeave); + Object(dom_["off"])(popper, 'mouseleave', this.handleMouseLeave); Object(dom_["off"])(reference, 'mouseup', this.doClose); Object(dom_["off"])(reference, 'mousedown', this.doShow); Object(dom_["off"])(reference, 'focusin', this.doShow); Object(dom_["off"])(reference, 'focusout', this.doClose); Object(dom_["off"])(reference, 'mousedown', this.doShow); Object(dom_["off"])(reference, 'mouseup', this.doClose); - Object(dom_["off"])(reference, 'mouseleave', this.handleMouseLeave); - Object(dom_["off"])(reference, 'mouseenter', this.handleMouseEnter); - Object(dom_["off"])(document, 'click', this.handleDocumentClick); + this.referenceElm = undefined; } }); // CONCATENATED MODULE: ./packages/popover/src/main.vue?vue&type=script&lang=js& @@ -21805,18 +21819,7 @@ main.directive = directive; this.$el.setAttribute('tabindex', this.tabindex); Object(dom_["on"])(this.referenceElm, 'mouseenter', this.show); Object(dom_["on"])(this.referenceElm, 'mouseleave', this.hide); - Object(dom_["on"])(this.referenceElm, 'focus', function () { - if (!_this3.$slots.default || !_this3.$slots.default.length) { - _this3.handleFocus(); - return; - } - var instance = _this3.$slots.default[0].componentInstance; - if (instance && instance.focus) { - instance.focus(); - } else { - _this3.handleFocus(); - } - }); + Object(dom_["on"])(this.referenceElm, 'focus', this.handleFocus); Object(dom_["on"])(this.referenceElm, 'blur', this.handleBlur); Object(dom_["on"])(this.referenceElm, 'click', this.removeFocusing); } @@ -21849,8 +21852,18 @@ main.directive = directive; this.debounceClose(); }, handleFocus: function handleFocus() { - this.focusing = true; - this.show(); + if (!this.$slots.default || !this.$slots.default.length) { + this.focusing = true; + this.show(); + return; + } + var instance = this.$slots.default[0].componentInstance; + if (instance && instance.focus) { + instance.focus(); + } else { + this.focusing = true; + this.show(); + } }, handleBlur: function handleBlur() { this.focusing = false; @@ -21918,6 +21931,7 @@ main.directive = directive; this.popperVM && this.popperVM.$destroy(); }, destroyed: function destroyed() { + this.popperVM && this.popperVM.$destroy(); var reference = this.referenceElm; if (reference.nodeType === 1) { Object(dom_["off"])(reference, 'mouseenter', this.show); diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue index ab5d060182c2e671989f1aba190c85a074d2c754..8b464ad39a78ac6efead5f687d977500642e45dc 100644 --- a/packages/popover/src/main.vue +++ b/packages/popover/src/main.vue @@ -98,16 +98,9 @@ export default { reference.setAttribute('aria-describedby', this.tooltipId); reference.setAttribute('tabindex', this.tabindex); // tab序列 popper.setAttribute('tabindex', 0); - if (this.trigger !== 'click') { - on(reference, 'focusin', () => { - this.handleFocus(); - const instance = reference.__vue__; - if (instance && typeof instance.focus === 'function') { - instance.focus(); - } - }); - on(popper, 'focusin', this.handleFocus); + on(reference, 'focusin', this.handleRefrenceFocus); + on(popper, 'focusin', this.handlePopperFocus); on(reference, 'focusout', this.handleBlur); on(popper, 'focusout', this.handleBlur); } @@ -154,7 +147,17 @@ export default { doClose() { this.showPopper = false; }, - handleFocus() { + handleRefrenceFocus() { + this.handlePopperFocus(); + if (!this.referenceElm) { + return; + } + const instance = this.referenceElm.__vue__; + if (instance && typeof instance.focus === 'function') { + instance.focus(); + } + }, + handlePopperFocus() { addClass(this.referenceElm, 'focusing'); if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true; }, @@ -193,9 +196,8 @@ export default { handleDocumentClick(e) { let reference = this.reference || this.$refs.reference; const popper = this.popper || this.$refs.popper; - if (!reference && this.$refs.wrapper.children) { - reference = this.referenceElm = this.$refs.wrapper.children[0]; + reference = this.$refs.wrapper.children[0]; } if (!this.$el || !reference || @@ -218,20 +220,26 @@ export default { } } }, - destroyed() { - const reference = this.reference; - + const reference = this.referenceElm; + const popper = this.popper || this.$refs.popper; + off(reference, 'focusin', this.handleRefrenceFocus); + off(popper, 'focusin', this.handlePopperFocus); + off(reference, 'focusout', this.handleBlur); + off(popper, 'focusout', this.handleBlur); + off(reference, 'keydown', this.handleKeydown); + off(reference, 'click', this.handleClick); off(reference, 'click', this.doToggle); - off(reference, 'mouseup', this.doClose); - off(reference, 'mousedown', this.doShow); + off(document, 'click', this.handleDocumentClick); + off(reference, 'mouseenter', this.handleMouseEnter); + off(popper, 'mouseenter', this.handleMouseEnter); + off(reference, 'mouseleave', this.handleMouseLeave); + off(popper, 'mouseleave', this.handleMouseLeave); off(reference, 'focusin', this.doShow); off(reference, 'focusout', this.doClose); off(reference, 'mousedown', this.doShow); off(reference, 'mouseup', this.doClose); - off(reference, 'mouseleave', this.handleMouseLeave); - off(reference, 'mouseenter', this.handleMouseEnter); - off(document, 'click', this.handleDocumentClick); + this.referenceElm = undefined; } }; diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index dc930ec58d42328a4d62cddb22fd513db31793cf..d9a6afc80d27ea89b838a47f395e249131c1370c 100644 --- a/packages/tooltip/src/main.js +++ b/packages/tooltip/src/main.js @@ -113,18 +113,7 @@ export default { this.$el.setAttribute('tabindex', this.tabindex); on(this.referenceElm, 'mouseenter', this.show); on(this.referenceElm, 'mouseleave', this.hide); - on(this.referenceElm, 'focus', () => { - if (!this.$slots.default || !this.$slots.default.length) { - this.handleFocus(); - return; - } - const instance = this.$slots.default[0].componentInstance; - if (instance && instance.focus) { - instance.focus(); - } else { - this.handleFocus(); - } - }); + on(this.referenceElm, 'focus', this.handleFocus); on(this.referenceElm, 'blur', this.handleBlur); on(this.referenceElm, 'click', this.removeFocusing); } @@ -157,6 +146,18 @@ export default { this.debounceClose(); }, handleFocus() { + if (!this.$slots.default || !this.$slots.default.length) { + this.doFocus(); + return; + } + const instance = this.$slots.default[0].componentInstance; + if (instance && instance.focus) { + instance.focus(); + } else { + this.doFocus(); + } + }, + doFocus() { this.focusing = true; this.show(); },