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

Table: manage tooltip state better, fixed #4044

pull/4210/head
pengchongfu 2017-04-09 00:51:39 +08:00 committed by 杨奕
parent 9be5a40b3f
commit 32543f3671
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/table/src/table-body.js
View File

@ -216,12 +216,17 @@ export default {
tooltip.referenceElm = cell; tooltip.referenceElm = cell;
tooltip.$refs.popper.style.display = 'none'; tooltip.$refs.popper.style.display = 'none';
tooltip.doDestroy(); tooltip.doDestroy();
tooltip.setExpectedState(true);
this.activateTooltip(tooltip); this.activateTooltip(tooltip);
} }
}, },
handleCellMouseLeave(event) { handleCellMouseLeave(event) {
this.$refs.tooltip && this.$refs.tooltip.handleClosePopper(); const tooltip = this.$refs.tooltip;
if (tooltip) {
tooltip.setExpectedState(false);
tooltip.handleClosePopper();
}
const cell = getCell(event); const cell = getCell(event);
if (!cell) return; if (!cell) return;

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

@ -58,8 +58,8 @@ export default {
name={ this.transition } name={ this.transition }
onAfterLeave={ this.doDestroy }> onAfterLeave={ this.doDestroy }>
<div <div
onMouseleave={ () => { this.debounceClose(); this.togglePreventClose(); } } onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
onMouseenter= { this.togglePreventClose } onMouseenter= { () => { this.setExpectedState(true); } }
ref="popper" ref="popper"
v-show={!this.disabled && this.showPopper} v-show={!this.disabled && this.showPopper}
class={ class={
@ -77,8 +77,8 @@ export default {
const data = vnode.data = vnode.data || {}; const data = vnode.data = vnode.data || {};
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.setExpectedState(true); this.handleShowPopper(); });
on.mouseleave = this.addEventHandle(on.mouseleave, this.debounceClose); on.mouseleave = this.addEventHandle(on.mouseleave, () => { this.setExpectedState(false); this.debounceClose(); });
data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
return vnode; return vnode;
@ -99,7 +99,7 @@ export default {
}, },
handleShowPopper() { handleShowPopper() {
if (this.manual) return; if (!this.expectedState || this.manual) return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.showPopper = true; this.showPopper = true;
@ -107,13 +107,13 @@ export default {
}, },
handleClosePopper() { handleClosePopper() {
if (this.preventClose || this.manual) return; if (this.expectedState || this.manual) return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.showPopper = false; this.showPopper = false;
}, },
togglePreventClose() { setExpectedState(expectedState) {
this.preventClose = !this.preventClose; this.expectedState = expectedState;
} }
} }
}; };