From b53254e33a7931b5064cf96afc0a423a96646d87 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 21 Nov 2020 18:36:23 +0800 Subject: [PATCH] feat(Popup): add click-close-icon event (#7599) --- src/popup/README.md | 17 +++++++++-------- src/popup/README.zh-CN.md | 17 +++++++++-------- src/popup/index.js | 9 ++++++++- src/popup/test/index.spec.js | 12 ++++++++++++ 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/popup/README.md b/src/popup/README.md index ce481f84b..4b4aa8720 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -129,11 +129,12 @@ export default { ### Events -| Event | Description | Arguments | -| ------------- | ------------------------------- | -------------- | -| click | Emitted when Popup is clicked | _event: Event_ | -| open | Emitted when opening Popup | - | -| close | Emitted when closing Popup | - | -| opened | Emitted when Popup is opened | - | -| closed | Emitted when Popup is closed | - | -| click-overlay | Emitted when overlay is clicked | - | +| Event | Description | Arguments | +| --- | --- | --- | +| click | Emitted when Popup is clicked | _event: Event_ | +| click-overlay | Emitted when overlay is clicked | - | +| click-close-icon `v2.11.0` | Emitted when close icon is clicked | _event: Event_ | +| open | Emitted when opening Popup | - | +| close | Emitted when closing Popup | - | +| opened | Emitted when Popup is opened | - | +| closed | Emitted when Popup is closed | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index f834c5168..67035c47a 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -140,11 +140,12 @@ export default { ### Events -| 事件名 | 说明 | 回调参数 | -| ------------- | -------------------------- | -------------- | -| click | 点击弹出层时触发 | _event: Event_ | -| open | 打开弹出层时触发 | - | -| close | 关闭弹出层时触发 | - | -| opened | 打开弹出层且动画结束后触发 | - | -| closed | 关闭弹出层且动画结束后触发 | - | -| click-overlay | 点击遮罩层时触发 | - | +| 事件名 | 说明 | 回调参数 | +| -------------------------- | -------------------------- | -------------- | +| click | 点击弹出层时触发 | _event: Event_ | +| click-overlay | 点击遮罩层时触发 | - | +| click-close-icon `v2.11.0` | 点击关闭图标时触发 | _event: Event_ | +| open | 打开弹出层时触发 | - | +| close | 关闭弹出层时触发 | - | +| opened | 打开弹出层且动画结束后触发 | - | +| closed | 关闭弹出层且动画结束后触发 | - | diff --git a/src/popup/index.js b/src/popup/index.js index d10199839..f10207495 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -44,6 +44,13 @@ export default createComponent({ this.onClosed = createEmitter('closed'); }, + methods: { + onClickCloseIcon(event) { + this.$emit('click-close-icon', event); + this.close(); + }, + }, + render() { if (!this.shouldRender) { return; @@ -86,7 +93,7 @@ export default createComponent({ tabindex="0" name={this.closeIcon} class={bem('close-icon', this.closeIconPosition)} - onClick={this.close} + onClick={this.onClickCloseIcon} /> )} diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js index f570087a7..993e9e8e0 100644 --- a/src/popup/test/index.spec.js +++ b/src/popup/test/index.spec.js @@ -252,6 +252,18 @@ test('closeable prop', () => { expect(wrapper.emitted('input')[0][0]).toEqual(false); }); +test('should emit click-close-icon event when close icon is clicked', () => { + const wrapper = mount(Popup, { + propsData: { + value: true, + closeable: true, + }, + }); + + wrapper.find('.van-popup__close-icon').trigger('click'); + expect(wrapper.emitted('click-close-icon').length).toEqual(1); +}); + test('close-icon prop', () => { const wrapper = mount(Popup, { propsData: {