feat(Popup): add click-close-icon event (#7599)

src/popup/README.md

@@ -130,10 +130,11 @@ export default {
 ### Events
 
 | 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 | - |
-| click-overlay | Emitted when overlay is clicked | -              |

src/popup/README.zh-CN.md

@@ -141,10 +141,11 @@ export default {
 ### Events
 
 | 事件名                     | 说明                       | 回调参数       |
-| ------------- | -------------------------- | -------------- |
+| -------------------------- | -------------------------- | -------------- |
 | click                      | 点击弹出层时触发           | _event: Event_ |
+| click-overlay              | 点击遮罩层时触发           | -              |
+| click-close-icon `v2.11.0` | 点击关闭图标时触发         | _event: Event_ |
 | open                       | 打开弹出层时触发           | -              |
 | close                      | 关闭弹出层时触发           | -              |
 | opened                     | 打开弹出层且动画结束后触发 | -              |
 | closed                     | 关闭弹出层且动画结束后触发 | -              |
-| click-overlay | 点击遮罩层时触发           | -              |

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}
             />
           )}
         </div>

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: {