fix: 修复 panel-click 事件失效问题 (#1421)

* fix: 修复 panel-click 事件失效问题 * fix: 修复 panel-click 事件失效问题
Tencent · Aug 31, 2022 · 63dc8ee · 63dc8ee
1 parent 7ae2bd3
commit 63dc8ee
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/date-picker/DatePickerPanel.tsx b/src/date-picker/DatePickerPanel.tsx
@@ -217,6 +217,11 @@ export default defineComponent({
       });
     }
 
+    function onPanelClick(context: { e: MouseEvent }) {
+      props.onPanelClick?.(context);
+      emit('panel-click', context);
+    }
+
     const panelProps = computed(() => ({
       value: cacheValue.value as string,
       year: year.value,
@@ -230,6 +235,7 @@ export default defineComponent({
       timePickerProps: props.timePickerProps,
       enableTimePicker: props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
+      onPanelClick,
       onCellClick,
       onJumperClick,
       onConfirmClick,

diff --git a/src/date-picker/DateRangePickerPanel.tsx b/src/date-picker/DateRangePickerPanel.tsx
@@ -329,6 +329,11 @@ export default defineComponent({
       });
     }
 
+    function onPanelClick(context: { e: MouseEvent }) {
+      props.onPanelClick?.(context);
+      emit('panel-click', context);
+    }
+
     const panelProps = computed(() => ({
       hoverValue: (isHoverCell.value ? hoverValue.value : []) as string[],
       value: (isSelected.value ? cacheValue.value : value.value) as string[],
@@ -345,6 +350,7 @@ export default defineComponent({
       enableTimePicker: props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
       panelPreselection: props.panelPreselection,
+      onPanelClick,
       onCellClick,
       onCellMouseEnter,
       onCellMouseLeave,

diff --git a/src/date-picker/_example/panel.vue b/src/date-picker/_example/panel.vue
@@ -1,17 +1,31 @@
 <template>
   <t-space direction="vertical">
     <div class="date-picker-panel-border">
-      <t-date-picker-panel @cell-click="handleCellClick" :on-change="handleChange" />
+      <t-date-picker-panel @panel-click="handlePanelClick" @cell-click="handleCellClick" :on-change="handleChange" />
     </div>
     <div class="date-picker-panel-border">
-      <t-date-picker-panel enable-time-picker @cell-click="handleCellClick" :on-change="handleChange" />
+      <t-date-picker-panel
+        enable-time-picker
+        @panel-click="handlePanelClick"
+        @cell-click="handleCellClick"
+        :on-change="handleChange"
+      />
     </div>
 
     <div class="date-picker-panel-border">
-      <t-date-range-picker-panel @cell-click="handleCellClick" :on-change="handleChange" />
+      <t-date-range-picker-panel
+        @panel-click="handlePanelClick"
+        @cell-click="handleCellClick"
+        :on-change="handleChange"
+      />
     </div>
     <div class="date-picker-panel-border">
-      <t-date-range-picker-panel enable-time-picker @cell-click="handleCellClick" :on-change="handleChange" />
+      <t-date-range-picker-panel
+        enable-time-picker
+        @panel-click="handlePanelClick"
+        @cell-click="handleCellClick"
+        :on-change="handleChange"
+      />
     </div>
   </t-space>
 </template>
@@ -23,7 +37,10 @@ export default {
       console.log('onChange value', value);
     },
     handleCellClick(value) {
-      console.log('onPick value', value);
+      console.log('onCellClick value', value);
+    },
+    handlePanelClick(ctx) {
+      console.log('onPanelClick', ctx);
     },
   },
 };

diff --git a/src/date-picker/base/Header.tsx b/src/date-picker/base/Header.tsx
@@ -163,7 +163,10 @@ export default defineComponent({
                   value: this.month,
                   options: monthOptions,
                   onChange: (val: number) => this.onMonthChange?.(val),
-                  popupProps: { overlayClassName: `${COMPONENT_NAME}-controller-month-popup` },
+                  popupProps: {
+                    attach: (triggerElement: HTMLElement) => triggerElement.parentNode,
+                    overlayClassName: `${COMPONENT_NAME}-controller-month-popup`,
+                  },
                 },
               }}
             />
@@ -177,6 +180,7 @@ export default defineComponent({
                 onChange: (val: number) => this.onYearChange?.(val),
                 popupProps: {
                   onScroll: this.handleScroll,
+                  attach: (triggerElement: HTMLElement) => triggerElement.parentNode,
                   overlayClassName: `${COMPONENT_NAME}-controller-year-popup`,
                 },
                 panelTopContent: () => (
+2 −3		style/web/components/date-picker/_index.less
+1 −0		style/web/components/message/_index.less