소스 검색

[Popover]: Open Delay Attribute (#5842)

* [Popover]: Open Delay Attribute

* Update main.vue

* fix openDelay

* Update popover.md
Kaung Myat Lwin 8 년 전
부모
커밋
007d1fb1ad
2개의 변경된 파일12개의 추가작업 그리고 1개의 파일을 삭제
  1. 1 0
      examples/docs/en-US/popover.md
  2. 11 1
      packages/popover/src/main.vue

+ 1 - 0
examples/docs/en-US/popover.md

@@ -233,6 +233,7 @@ 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 | — | — |
 
 ### Slot
 | Name | Description |

+ 11 - 1
packages/popover/src/main.vue

@@ -30,6 +30,10 @@ export default {
       default: 'click',
       validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
     },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
     title: String,
     disabled: Boolean,
     content: String,
@@ -105,7 +109,13 @@ export default {
       this.showPopper = false;
     },
     handleMouseEnter() {
-      this.showPopper = true;
+      if (this.openDelay) {
+        setTimeout(() => {
+          this.showPopper = true;
+        }, this.openDelay);
+      } else {
+        this.showPopper = true;
+      }
       clearTimeout(this._timer);
     },
     handleMouseLeave() {