mirror of https://github.com/ElemeFE/element
Tooltip: add hide-after timeout for hiding tooltip (#6401)
* added hide-after timeout for hiding tooltip * restored clearTimeout(this.timeout) in handleClosePopper()pull/7028/head
parent
2057604e24
commit
070f60c307
|
@ -213,3 +213,4 @@ Disabled form elements are not supported in tooltip, see more information at [MD
|
|||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
|
|
|
@ -39,11 +39,16 @@ export default {
|
|||
enterable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideAfter: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
timeoutPending: null,
|
||||
handlerAdded: false
|
||||
};
|
||||
},
|
||||
|
@ -118,15 +123,28 @@ export default {
|
|||
this.timeout = setTimeout(() => {
|
||||
this.showPopper = true;
|
||||
}, this.openDelay);
|
||||
|
||||
if (this.hideAfter > 0) {
|
||||
this.timeoutPending = setTimeout(() => {
|
||||
this.showPopper = false;
|
||||
}, this.hideAfter);
|
||||
}
|
||||
},
|
||||
|
||||
handleClosePopper() {
|
||||
if (this.enterable && this.expectedState || this.manual) return;
|
||||
clearTimeout(this.timeout);
|
||||
|
||||
if (this.timeoutPending) {
|
||||
clearTimeout(this.timeoutPending);
|
||||
}
|
||||
this.showPopper = false;
|
||||
},
|
||||
|
||||
setExpectedState(expectedState) {
|
||||
if (expectedState === false) {
|
||||
clearTimeout(this.timeoutPending);
|
||||
}
|
||||
this.expectedState = expectedState;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue