Popover: add manual

chaabni · Nov 16, 2016 · 602c569 · 602c569
1 parent d4e45e8
commit 602c569
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
@@ -125,7 +125,7 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
 
 ### Nested information
 
-Other components can be nested in popover. Following is an example of nested table. 
+Other components can be nested in popover. Following is an example of nested table.
 
 :::demo replace the `content` attribute with a default `slot`.
 
@@ -207,7 +207,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | how the popover is triggered | string  | click/focus/hover |    click    |
+| trigger | how the popover is triggered | string  | click/focus/hover/manual |    click    |
 |  title              | popover title | string | — | — |
 |  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |
 |  width        |  popover width  | string, number            | — | Min width 150px |

diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
@@ -234,7 +234,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | 触发方式 | String  | click/focus/hover |    click    |
+| trigger | 触发方式 | String  | click/focus/hover/manual |    click    |
 |  title              | 标题 | String | — | — |
 |  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |

diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
@@ -28,7 +28,7 @@ export default {
     trigger: {
       type: String,
       default: 'click',
-      validator: value => ['click', 'focus', 'hover'].indexOf(value) > -1
+      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
     },
     title: String,
     content: String,
@@ -67,7 +67,7 @@ export default {
       on(popper, 'mouseenter', this.handleMouseEnter);
       on(reference, 'mouseleave', this.handleMouseLeave);
       on(popper, 'mouseleave', this.handleMouseLeave);
-    } else {
+    } else if (this.trigger === 'focus') {
       let found = false;
 
       if ([].slice.call(reference.children).length) {

diff --git a/test/unit/specs/popover.spec.js b/test/unit/specs/popover.spec.js
@@ -45,6 +45,20 @@ describe('Popover', () => {
       }, 250); // 代码里是 200ms
     });
 
+    it('manual', done => {
+      vm = createVM('manual');
+      const compo = vm.$refs.popover;
+      const button = vm.$el.querySelector('button');
+
+      triggerEvent(button, 'mouseenter');
+      expect(compo.showPopper).to.false;
+      triggerEvent(button, 'mouseleave');
+      setTimeout(_ => {
+        expect(compo.showPopper).to.false;
+        done();
+      }, 250); // 代码里是 200ms
+    });
+
     it('focus input in children node', () => {
       vm = createVue(`
         <div>