From 602c5699893a84e634432de95c396d002d1981ee Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 16 Nov 2016 13:52:43 +0800 Subject: [PATCH] Popover: add manual --- examples/docs/en-US/popover.md | 4 ++-- examples/docs/zh-CN/popover.md | 2 +- packages/popover/src/main.vue | 4 ++-- test/unit/specs/popover.spec.js | 14 ++++++++++++++ 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md index c13b402d8..be3f73b3c 100644 --- 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 index 0a2603b2b..99af36ef0 100644 --- 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 index 922e4fba1..c511dddcc 100644 --- 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 index 60c418b09..9a695d028 100644 --- 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(`