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: ` +