From 465c38bfaa0f0a6e748b11ac6ac012330a8bd287 Mon Sep 17 00:00:00 2001
From: LachlanStuart <26366936+LachlanStuart@users.noreply.github.com>
Date: Wed, 7 Aug 2019 05:12:00 +0200
Subject: [PATCH] Popover: add close-delay prop (#16671)
---
examples/docs/en-US/popover.md | 3 +-
examples/docs/es/popover.md | 1 +
examples/docs/fr-FR/popover.md | 1 +
examples/docs/zh-CN/popover.md | 1 +
packages/popover/src/main.vue | 14 +++++++--
test/unit/specs/popover.spec.js | 52 ++++++++++++++++++++++++++++++++-
types/popover.d.ts | 5 +++-
7 files changed, 71 insertions(+), 6 deletions(-)
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index f95963a6a..5dfc35c00 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -151,7 +151,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
-| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
+| open-delay | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |
+| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
### Slot
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index 90249fa82..f6812c3bc 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -151,6 +151,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
+| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
### Slot
diff --git a/examples/docs/fr-FR/popover.md b/examples/docs/fr-FR/popover.md
index aab3633dd..eca6f859e 100644
--- a/examples/docs/fr-FR/popover.md
+++ b/examples/docs/fr-FR/popover.md
@@ -153,6 +153,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | Classe du popover. | string | — | — |
| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
+| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
### Slot
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 3486b1547..ff9dbd853 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -149,6 +149,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 为 popper 添加类名 | String | — | — |
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
+| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### Slot
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index ef8fd9a9e..67e1e5360 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -42,6 +42,10 @@ export default {
type: Number,
default: 0
},
+ closeDelay: {
+ type: Number,
+ default: 200
+ },
title: String,
disabled: Boolean,
content: String,
@@ -176,9 +180,13 @@ export default {
},
handleMouseLeave() {
clearTimeout(this._timer);
- this._timer = setTimeout(() => {
+ if (this.closeDelay) {
+ this._timer = setTimeout(() => {
+ this.showPopper = false;
+ }, this.closeDelay);
+ } else {
this.showPopper = false;
- }, 200);
+ }
},
handleDocumentClick(e) {
let reference = this.reference || this.$refs.reference;
@@ -203,7 +211,7 @@ export default {
this.doDestroy();
},
cleanup() {
- if (this.openDelay) {
+ if (this.openDelay || this.closeDelay) {
clearTimeout(this._timer);
}
}
diff --git a/test/unit/specs/popover.spec.js b/test/unit/specs/popover.spec.js
index dd9a7eb6a..a1d4e9193 100644
--- a/test/unit/specs/popover.spec.js
+++ b/test/unit/specs/popover.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, createTest, destroyVM } from '../util';
+import { createVue, triggerEvent, createTest, destroyVM, wait } from '../util';
import Popover from 'packages/popover';
describe('Popover', () => {
@@ -249,6 +249,56 @@ describe('Popover', () => {
}, 50);
});
+ describe('open/close delays', () => {
+ it('100ms open / instant close', async() => {
+ vm = createVue(`
+
+
+
+
+
+ `, true);
+ const compo = vm.$refs.popover;
+ const button = vm.$el.querySelector('button');
+
+ triggerEvent(button, 'mouseenter');
+ expect(compo.showPopper).to.false;
+ await wait(150);
+ expect(compo.showPopper).to.true;
+ triggerEvent(button, 'mouseleave');
+ expect(compo.showPopper).to.false;
+ });
+
+ it('instant open / 100ms close', async() => {
+ vm = createVue(`
+
+
+
+
+
+ `, true);
+ const compo = vm.$refs.popover;
+ const button = vm.$el.querySelector('button');
+
+ triggerEvent(button, 'mouseenter');
+ expect(compo.showPopper).to.true;
+ triggerEvent(button, 'mouseleave');
+ expect(compo.showPopper).to.true;
+ await wait(150);
+ expect(compo.showPopper).to.false;
+ });
+ });
+
it('destroy event', () => {
vm = createTest(Popover, {
reference: document.createElement('div'),
diff --git a/types/popover.d.ts b/types/popover.d.ts
index 742103730..5ad481280 100644
--- a/types/popover.d.ts
+++ b/types/popover.d.ts
@@ -58,9 +58,12 @@ export declare class ElPopover extends ElementUIComponent {
/** Custom class name for popover */
popperClass: string
- /** Delay of appearance when trigger is hover, in milliseconds */
+ /** Delay before appearing when trigger is hover, in milliseconds */
openDelay: number
+ /** Delay before disappearing when trigger is hover, in milliseconds */
+ closeDelay: number
+
/** Popover tabindex */
tabindex: number