diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index 6c9e95ad8..27d0ec21c 100644 --- a/packages/tooltip/src/main.js +++ b/packages/tooltip/src/main.js @@ -1,4 +1,5 @@ import Popper from 'element-ui/src/utils/vue-popper'; +import debounce from 'throttle-debounce/debounce'; import Vue from 'vue'; export default { @@ -43,6 +44,8 @@ export default { return this.node; } }).$mount(); + + this.debounceClose = debounce(200, () => this.handleClosePopper()); }, render(h) { @@ -51,6 +54,8 @@ export default { name={ this.transition } onAfterLeave={ this.doDestroy }>
{ this.debounceClose(); this.togglePreventClose(); } } + onMouseenter= { this.togglePreventClose } ref="popper" v-show={!this.disabled && this.showPopper} class={ @@ -67,7 +72,7 @@ export default { const on = vnode.data.on = vnode.data.on || {}; on.mouseenter = this.addEventHandle(on.mouseenter, this.handleShowPopper); - on.mouseleave = this.addEventHandle(on.mouseleave, this.handleClosePopper); + on.mouseleave = this.addEventHandle(on.mouseleave, this.debounceClose); data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); return vnode; @@ -83,6 +88,7 @@ export default { }, concatClass(a, b) { + if (a && a.indexOf(b) > -1) return a; return a ? b ? (a + ' ' + b) : a : (b || ''); }, @@ -95,9 +101,13 @@ export default { }, handleClosePopper() { - if (this.manual) return; + if (this.preventClose || this.manual) return; clearTimeout(this.timeout); this.showPopper = false; + }, + + togglePreventClose() { + this.preventClose = !this.preventClose; } } }; diff --git a/test/unit/specs/tooltip.spec.js b/test/unit/specs/tooltip.spec.js index 77127e81e..ee4e549be 100644 --- a/test/unit/specs/tooltip.spec.js +++ b/test/unit/specs/tooltip.spec.js @@ -78,9 +78,12 @@ describe('Tooltip', () => { triggerEvent(tooltip.$el, 'mouseenter'); it('popperElm is exist', () => expect(tooltip.popperElm).to.exist); it('showPopper is true', () => expect(tooltip.showPopper).to.true); - it('close popper', () => { + it('close popper', done => { triggerEvent(tooltip.$el, 'mouseleave'); - expect(tooltip.showPopper).to.false; + setTimeout(() => { + expect(tooltip.showPopper).to.false; + done(); + }, 300); }); });