github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tooltip: prevent hidding when hovering tooltip, close #2633 (#2654) 

* Tooltip: prevent hidding when hovering tooltip, close #2633

* Fix test
pull/2674/head
cinwell.li 2017-02-04 18:36:08 +08:00 committed by baiyaaaaa
parent d2f400adbb
commit 14565178ed
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/tooltip/src/main.js
View File

@ -1,4 +1,5 @@
import Popper from 'element-ui/src/utils/vue-popper'; import Popper from 'element-ui/src/utils/vue-popper';
import debounce from 'throttle-debounce/debounce';
import Vue from 'vue'; import Vue from 'vue';
export default { export default {
@ -43,6 +44,8 @@ export default {
return this.node; return this.node;
} }
}).$mount(); }).$mount();
this.debounceClose = debounce(200, () => this.handleClosePopper());
}, },
render(h) { render(h) {
@ -51,6 +54,8 @@ export default {
name={ this.transition } name={ this.transition }
onAfterLeave={ this.doDestroy }> onAfterLeave={ this.doDestroy }>
<div <div
onMouseleave={ () => { this.debounceClose(); this.togglePreventClose(); } }
onMouseenter= { this.togglePreventClose }
ref="popper" ref="popper"
v-show={!this.disabled && this.showPopper} v-show={!this.disabled && this.showPopper}
class={ class={
@ -67,7 +72,7 @@ export default {
const on = vnode.data.on = vnode.data.on || {}; const on = vnode.data.on = vnode.data.on || {};
on.mouseenter = this.addEventHandle(on.mouseenter, this.handleShowPopper); 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'); data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
return vnode; return vnode;
@ -83,6 +88,7 @@ export default {
}, },
concatClass(a, b) { concatClass(a, b) {
if (a && a.indexOf(b) > -1) return a;
return a ? b ? (a + ' ' + b) : a : (b || ''); return a ? b ? (a + ' ' + b) : a : (b || '');
}, },
@ -95,9 +101,13 @@ export default {
}, },
handleClosePopper() { handleClosePopper() {
if (this.manual) return; if (this.preventClose || this.manual) return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.showPopper = false; this.showPopper = false;
},
togglePreventClose() {
this.preventClose = !this.preventClose;
} }
} }
}; };

7
test/unit/specs/tooltip.spec.js
View File

@ -78,9 +78,12 @@ describe('Tooltip', () => {
triggerEvent(tooltip.$el, 'mouseenter'); triggerEvent(tooltip.$el, 'mouseenter');
it('popperElm is exist', () => expect(tooltip.popperElm).to.exist); it('popperElm is exist', () => expect(tooltip.popperElm).to.exist);
it('showPopper is true', () => expect(tooltip.showPopper).to.true); it('showPopper is true', () => expect(tooltip.showPopper).to.true);
it('close popper', () => { it('close popper', done => {
triggerEvent(tooltip.$el, 'mouseleave'); triggerEvent(tooltip.$el, 'mouseleave');
expect(tooltip.showPopper).to.false; setTimeout(() => {
expect(tooltip.showPopper).to.false;
done();
}, 300);
}); });
}); });