feat(Calendar): add click-overlay event

youzan · Jan 15, 2025 · 3788c57 · 3788c57
1 parent 1f80653
commit 3788c57
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx
@@ -115,6 +115,7 @@ export default defineComponent({
     'update:show',
     'clickSubtitle',
     'clickDisabledDate',
+    'clickOverlay',
     'panelChange',
   ],
 
@@ -512,6 +513,8 @@ export default defineComponent({
       }
     };
 
+    const onClickOverlay = (event: MouseEvent) => emit('clickOverlay', event);
+
     const updateShow = (value: boolean) => emit('update:show', value);
 
     const renderMonth = (date: Date, index: number) => {
@@ -654,6 +657,7 @@ export default defineComponent({
             closeOnPopstate={props.closeOnPopstate}
             safeAreaInsetTop={props.safeAreaInsetTop}
             closeOnClickOverlay={props.closeOnClickOverlay}
+            onClickOverlay={onClickOverlay}
             onUpdate:show={updateShow}
           />
         );

diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md
@@ -340,6 +340,7 @@ Following props are supported when the type is multiple
 | over-range | Emitted when exceeded max range | - |
 | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | Emitted when clicking disabled date | _value: Date \| Date[]_ |
+| click-overlay `v4.9.16` | Emitted when overlay is clicked | _event: MouseEvent_ |
 | panel-change | Emitted when switching calendar panel (effective when `switch mode` is not `none`) | _{ date: Date }_ |
 
 ### Slots

diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md
@@ -346,6 +346,7 @@ export default {
 | over-range | 范围选择超过最多可选天数时触发 | - |
 | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | 点击禁用日期时触发 | _value: Date \| Date[]_ |
+| click-overlay `v4.9.16` | 点击遮罩层时触发 | _event: MouseEvent_ |
 | panel-change | 日历面板切换时触发（`switch-mode` 不为 `none` 时生效） | _{ date: Date }_ |
 
 ### Slots

diff --git a/packages/vant/src/calendar/test/index.spec.ts b/packages/vant/src/calendar/test/index.spec.ts
@@ -531,6 +531,22 @@ test('popup wrapper', async () => {
   expect(wrapper.find('.van-calendar__popup').style.display).toEqual('none');
 });
 
+test('should trigger click-overlay event when overlay is clicked', async () => {
+  const onClickOverlay = vi.fn();
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate,
+      defaultDate: minDate,
+      show: true,
+      onClickOverlay,
+    },
+  });
+
+  wrapper.find('.van-overlay').trigger('click');
+  expect(onClickOverlay).toHaveBeenCalled();
+});
+
 test('set show-mark prop to false', async () => {
   const wrapper = mount(Calendar, {
     props: {