feat(Calendar): add click-subtitle event (#4385)

* feat(Calendar): add click-subtitle event

* docs(Calendar): updateOC

packages/calendar/README.md

@@ -266,14 +266,14 @@ Page({
 ### Props
 
 | 参数                  | 说明                                                                                               | 类型                 | 默认值             |
-| --- | --- | --- | --- |
+| --------------------- | -------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
 | type                  | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_             | `single`           |
 | title                 | 日历标题                                                                                           | _string_             | `日期选择`         |
 | color                 | 主题色，对底部按钮和选中日期生效                                                                   | _string_             | `#ee0a24`          |
 | min-date              | 可选择的最小日期                                                                                   | _number_             | 当前日期           |
 | max-date              | 可选择的最大日期                                                                                   | _number_             | 当前日期的六个月后 |
 | default-date          | 默认选中的日期，`type`为`multiple`或`range`时为数组                                                | _number \| number[]_ | 今天               |
-| row-height | 日期行高 | _number \| string_ | `64` |
+| row-height            | 日期行高                                                                                           | _number \            | string_            | `64` |
 | formatter             | 日期格式化函数                                                                                     | _(day: Day) => Day_  | -                  |
 | poppable              | 是否以弹层的形式展示日历                                                                           | _boolean_            | `true`             |
 | show-mark             | 是否显示月份背景水印                                                                               | _boolean_            | `true`             |
@@ -289,7 +289,7 @@ Page({
 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
 
 | 参数                   | 说明                                    | 类型      | 默认值   |
-| --- | --- | --- | --- |
+| ---------------------- | --------------------------------------- | --------- | -------- |
 | show                   | 是否显示日历弹窗                        | _boolean_ | `false`  |
 | position               | 弹出位置，可选值为 `top` `right` `left` | _string_  | `bottom` |
 | round                  | 是否显示圆角弹窗                        | _boolean_ | `true`   |
@@ -301,7 +301,7 @@ Page({
 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
 
 | 参数               | 说明                                          | 类型               | 默认值                   |
-| --- | --- | --- | --- |
+| ------------------ | --------------------------------------------- | ------------------ | ------------------------ |
 | max-range          | 日期区间最多可选天数，默认无限制              | _number \| string_ | -                        |
 | range-prompt       | 范围选择超过最多可选天数时的提示文案          | _string \| null_   | `选择天数不能超过 xx 天` |
 | show-range-prompt  | 范围选择超过最多可选天数时，是否展示提示文案  | _boolean_          | `true`                   |
@@ -312,7 +312,7 @@ Page({
 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。
 
 | 键名       | 说明                                                               | 类型     |
-| --- | --- | --- |
+| ---------- | ------------------------------------------------------------------ | -------- |
 | date       | 日期对应的 Date 对象                                               | _Date_   |
 | type       | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
 | text       | 中间显示的文字                                                     | _string_ |
@@ -322,7 +322,7 @@ Page({
 ### Events
 
 | 事件名                 | 说明                                                               | 回调参数                       |
-| --- | --- | --- |
+| ---------------------- | ------------------------------------------------------------------ | ------------------------------ |
 | select                 | 点击任意日期时触发                                                 | _value: Date \| Date[]_        |
 | unselect               | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发     | _value: Date_                  |
 | confirm                | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_        |
@@ -331,6 +331,7 @@ Page({
 | opened                 | 打开弹出层且动画结束后触发                                         | -                              |
 | closed                 | 关闭弹出层且动画结束后触发                                         | -                              |
 | over-range             | 范围选择超过最多可选天数时触发                                     | -                              |
+| click-subtitle `1.7.3` | 范围选择超过最多可选天数时触发                                     | _WechatMiniprogram.TouchEvent_ |
 
 ### Slots
 

packages/calendar/calendar.wxml

@@ -5,6 +5,7 @@
     subtitle="{{ subtitle }}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"
+    bind:click-subtitle="onClickSubtitle"
   >
     <slot name="title" slot="title"></slot>
   </header>

packages/calendar/components/header/index.ts

@@ -35,5 +35,9 @@ VantComponent({
         ],
       });
     },
+
+    onClickSubtitle(event: WechatMiniprogram.TouchEvent) {
+      this.$emit('click-subtitle', event);
+    },
   },
 });

packages/calendar/components/header/index.wxml

@@ -4,7 +4,7 @@
     <view class="van-calendar__header-title">{{ title }}</view>
   </block>
 
-  <view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle">
+  <view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle" bind:tap="onClickSubtitle">
     {{ subtitle }}
   </view>
 

packages/calendar/index.ts

@@ -390,5 +390,9 @@ VantComponent({
         this.$emit('confirm', copyDates(this.data.currentDate));
       });
     },
+
+    onClickSubtitle(event: WechatMiniprogram.TouchEvent) {
+      this.$emit('click-subtitle', event);
+    },
   },
 });