blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* feat(Calendar): add click-subtitle event

* docs(Calendar): updateOC
This commit is contained in:
nemo-shen 2021-08-18 10:44:29 +08:00 committed by GitHub
parent bcf7c9c131
commit e07f9f9581
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
packages/calendar/README.md
View File

@ -265,72 +265,73 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --------------------- | -------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
| type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` | | type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
| title | 日历标题 | _string_ | `日期选择` | | title | 日历标题 | _string_ | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` | | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| min-date | 可选择的最小日期 | _number_ | 当前日期 | | min-date | 可选择的最小日期 | _number_ | 当前日期 |
| max-date | 可选择的最大日期 | _number_ | 当前日期的六个月后 | | max-date | 可选择的最大日期 | _number_ | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _number \| number[]_ | 今天 | | default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _number \| number[]_ | 今天 |
| row-height | 日期行高 | _number \| string_ | `64` | | row-height | 日期行高 | _number \ | string_ | `64` |
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - | | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` | | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` | | show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
| show-title | 是否展示日历标题 | _boolean_ | `true` | | show-title | 是否展示日历标题 | _boolean_ | `true` |
| show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` | | show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` |
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` | | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
| confirm-text | 确认按钮的文字 | _string_ | `确定` | | confirm-text | 确认按钮的文字 | _string_ | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` | | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
| first-day-of-week | 设置周起始日 | _0~6_ | `0` | | first-day-of-week | 设置周起始日 | _0~6_ | `0` |
### Poppable Props ### Poppable Props
当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props: 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | ---------------------- | --------------------------------------- | --------- | -------- |
| show | 是否显示日历弹窗 | _boolean_ | `false` | | show | 是否显示日历弹窗 | _boolean_ | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` | | position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
| round | 是否显示圆角弹窗 | _boolean_ | `true` | | round | 是否显示圆角弹窗 | _boolean_ | `true` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` | | safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` |
### Range Props ### Range Props
当 Canlendar 的 `type` 为 `range` 时，支持以下 props: 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | ------------------ | --------------------------------------------- | ------------------ | ------------------------ |
| max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - | | max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
| range-prompt | 范围选择超过最多可选天数时的提示文案 | _string \| null_ | `选择天数不能超过 xx 天` | | range-prompt | 范围选择超过最多可选天数时的提示文案 | _string \| null_ | `选择天数不能超过 xx 天` |
| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` | | show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
| allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` | | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
### Day 数据结构 ### Day 数据结构
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| --- | --- | --- | | ---------- | ------------------------------------------------------------------ | -------- |
| date | 日期对应的 Date 对象 | _Date_ | | date | 日期对应的 Date 对象 | _Date_ |
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ | | type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | 中间显示的文字 | _string_ | | text | 中间显示的文字 | _string_ |
| topInfo | 上方的提示信息 | _string_ | | topInfo | 上方的提示信息 | _string_ |
| bottomInfo | 下方的提示信息 | _string_ | | bottomInfo | 下方的提示信息 | _string_ |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| --- | --- | --- | | ---------------------- | ------------------------------------------------------------------ | ------------------------------ |
| select | 点击任意日期时触发 | _value: Date \| Date[]_ | | select | 点击任意日期时触发 | _value: Date \| Date[]_ |
| unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ | | unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | | confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
| open | 打开弹出层时触发 | - | | open | 打开弹出层时触发 | - |
| close | 关闭弹出层时触发 | - | | close | 关闭弹出层时触发 | - |
| opened | 打开弹出层且动画结束后触发 | - | | opened | 打开弹出层且动画结束后触发 | - |
| closed | 关闭弹出层且动画结束后触发 | - | | closed | 关闭弹出层且动画结束后触发 | - |
| over-range | 范围选择超过最多可选天数时触发 | - | | over-range | 范围选择超过最多可选天数时触发 | - |
| click-subtitle `1.7.3` | 范围选择超过最多可选天数时触发 | _WechatMiniprogram.TouchEvent_ |
### Slots ### Slots

1
packages/calendar/calendar.wxml
View File

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

4
packages/calendar/components/header/index.ts
View File

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

2
packages/calendar/components/header/index.wxml
View File

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

4
packages/calendar/index.ts
View File

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