diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md index b7f775521..61601147f 100644 --- a/examples/docs/en-US/popover.md +++ b/examples/docs/en-US/popover.md @@ -225,3 +225,8 @@ Of course, you can nest other operations. It's more light-weight than using a di | — | text content of popover | | reference | HTML element that triggers popover | +### Events +| Event Name | Description | 回调参数 | +|---------|--------|---------| +| show | triggers when popover shows | - | +| hide | triggers when popover hides | - | diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md index 744d0a4ba..81b962b4e 100644 --- a/examples/docs/zh-CN/popover.md +++ b/examples/docs/zh-CN/popover.md @@ -251,3 +251,9 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的 |--- | ---| | — | Popover 内嵌 HTML 文本 | | reference | 触发 Popover 显示的 HTML 元素 | + +### Events +| 事件名称 | 说明 | 回调参数 | +|---------|--------|---------| +| show | 显示时触发 | — | +| hide | 隐藏时触发 | — | diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue index c511dddcc..3db2dc690 100644 --- a/packages/popover/src/main.vue +++ b/packages/popover/src/main.vue @@ -44,6 +44,12 @@ export default { } }, + watch: { + showPopper(newVal, oldVal) { + newVal ? this.$emit('show') : this.$emit('hide'); + } + }, + mounted() { let reference = this.reference || this.$refs.reference; const popper = this.popper || this.$refs.popper; diff --git a/test/unit/specs/popover.spec.js b/test/unit/specs/popover.spec.js index 9a695d028..db309e09c 100644 --- a/test/unit/specs/popover.spec.js +++ b/test/unit/specs/popover.spec.js @@ -205,6 +205,59 @@ describe('Popover', () => { }); }); + describe('event', (done) => { + const createVM = (trigger) => { + return createVue({ + template: ` +
+ + + +
+ `, + + methods: { + handleShow() { + this.trigger = true; + }, + handleHide() { + this.trigger = false; + } + }, + + data() { + return { + trigger: false + }; + } + }, true); + }; + + it('show/hide', () => { + vm = createVM('click'); + const compo = vm.$refs.popover; + + vm.$el.querySelector('button').click(); + expect(compo.showPopper).to.true; + expect(vm.trigger).to.false; + document.body.click(); + expect(compo.showPopper).to.false; + setTimeout(_ => { + expect(vm.trigger).to.true; + document.body.click(); + setTimeout(_ => { + expect(vm.trigger).to.false; + }, 50); + done(); + }, 50); + }); + }); + it('destroy event', () => { vm = createTest(Popover, { reference: document.createElement('div'),