admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 17:48:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Calendar 优化选中样式和滚动位置处理并支持屏蔽内置cell (#768)

Browse Source
This commit is contained in:
不如摸鱼去 2024-12-08 20:39:04 +08:00 committed by GitHub
parent 995a65f845
commit 97c40047e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 319 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/component/calendar-view.md
View File

@ -138,14 +138,27 @@ function handleChange({ value }) {
设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下： 设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下：
| 属性 | 类型 | 说明 | 最低版本 | | 属性 | 类型 | 说明 | 最低版本 |
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | ---------- | --------------- | ------------------------------------------- | -------- |
| type | string | 日期类型，'selected' - 单日期选中，'start' - 范围开始日期，'end' - 范围结束日期，'middle' - 范围开始与结束之间的日期，'same' - 范围开始与结束日期同一天 | - | | type | CalendarDayType | 可选值见[CalendarDayType](#calendardaytype) | - |
| date | timestamp | 13 位的时间戳 | - | | date | timestamp | 13 位的时间戳 | - |
| text | string | 日期文本内容 | - | | text | string | 日期文本内容 | - |
| topInfo | string | 上方提示信息 | - | | topInfo | string | 上方提示信息 | - |
| bottomInfo | string | 下方提示信息 | - | | bottomInfo | string | 下方提示信息 | - |
| disabled | boolean | 是否禁用 | - | | disabled | boolean | 是否禁用 | - |
### CalendarDayType
| 类型 | 说明 |
| ----------------- | ------------------------------------ |
| selected | 单日期选中 |
| start | 范围开始日期 |
| end | 范围结束日期 |
| middle | 范围开始与结束之间的日期 |
| same | 范围开始与结束日期同一天 |
| current | 当前日期 |
| multiple-middle | 多日期范围选择，开始与结束之间的日期 |
| multiple-selected | 多日期范围选择，选中的日期 |
```html ```html
<wd-calendar-view type="daterange" v-model="value" allow-same-day :formatter="formatter" @change="handleChange"></wd-calendar-view> <wd-calendar-view type="daterange" v-model="value" allow-same-day :formatter="formatter" @change="handleChange"></wd-calendar-view>
``` ```
@ -219,7 +232,7 @@ function handleChange({ value }) {
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ----------------- | ---------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- |
| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | | v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - |
| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | | type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - |
| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | | min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - |
@ -234,7 +247,7 @@ function handleChange({ value }) {
| panel-height | 可滚动面板的高度 | number | - | 378 | - | | panel-height | 可滚动面板的高度 | number | - | 378 | - |
| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - | | time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - |
| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - | | hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - |
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | | immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发 picker-view 的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25 版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
## Events ## Events

72
docs/component/calendar.md
View File

@ -146,14 +146,27 @@ function handleConfirm({ value }) {
设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下： 设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下：
| 属性 | 类型 | 说明 | 最低版本 | | 属性 | 类型 | 说明 | 最低版本 |
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | ---------- | --------------- | ------------------------------------------- | -------- |
| type | string | 日期类型，'selected' - 单日期选中，'start' - 范围开始日期，'end' - 范围结束日期，'middle' - 范围开始与结束之间的日期，'same' - 范围开始与结束日期同一天 | - | | type | CalendarDayType | 可选值见[CalendarDayType](#calendardaytype) | - |
| date | timestamp | 13 位的时间戳 | - | | date | timestamp | 13 位的时间戳 | - |
| text | string | 日期文本内容 | - | | text | string | 日期文本内容 | - |
| topInfo | string | 上方提示信息 | - | | topInfo | string | 上方提示信息 | - |
| bottomInfo | string | 下方提示信息 | - | | bottomInfo | string | 下方提示信息 | - |
| disabled | boolean | 是否禁用 | - | | disabled | boolean | 是否禁用 | - |
### CalendarDayType
| 类型 | 说明 | 最低版本 |
| ----------------- | ------------------------------------ | ---------------- |
| selected | 单日期选中 | - |
| start | 范围开始日期 | - |
| end | 范围结束日期 | - |
| middle | 范围开始与结束之间的日期 | - |
| same | 范围开始与结束日期同一天 | - |
| current | 当前日期 | - |
| multiple-middle | 多日期范围选择，开始与结束之间的日期 | $LOWEST_VERSION$ |
| multiple-selected | 多日期范围选择，选中的日期 | $LOWEST_VERSION$ |
```html ```html
<wd-calendar type="daterange" v-model="value" allow-same-day :formatter="formatter" @confirm="handleConfirm" /> <wd-calendar type="daterange" v-model="value" allow-same-day :formatter="formatter" @confirm="handleConfirm" />
``` ```
@ -210,7 +223,7 @@ const formatter = (day) => {
```html ```html
<wd-calendar <wd-calendar
label="快捷选项" label="快捷选项"
:shortcuts ="shortcuts " :shortcuts="shortcuts "
:on-shortcuts-click="onShortcutsClick" :on-shortcuts-click="onShortcutsClick"
type="daterange" type="daterange"
v-model="value" v-model="value"
@ -243,7 +256,6 @@ const onShortcutsClick = ({ item }) => {
return [startDate, endDate] return [startDate, endDate]
} }
function handleConfirm({ value }) { function handleConfirm({ value }) {
console.log(value) console.log(value)
} }
@ -319,7 +331,6 @@ const beforeConfirm = ({ value, resolve }) => {
function handleConfirm({ value }) { function handleConfirm({ value }) {
console.log(value) console.log(value)
} }
``` ```
## 最大范围限制 ## 最大范围限制
@ -340,7 +351,7 @@ function handleConfirm({ value }) {
```html ```html
<view style="margin-bottom: 10px;">当前选中日期：{{ formatValue }}</view> <view style="margin-bottom: 10px;">当前选中日期：{{ formatValue }}</view>
<wd-calendar use-default-slot v-model="value" @confirm="handleConfirm4"> <wd-calendar v-model="value" @confirm="handleConfirm4">
<wd-button>选择日期</wd-button> <wd-button>选择日期</wd-button>
</wd-calendar> </wd-calendar>
``` ```
@ -352,13 +363,42 @@ const formatValue = ref<string>('')
function handleConfirm4({ value }) { function handleConfirm4({ value }) {
formatValue.value = new Date(value).toString() formatValue.value = new Date(value).toString()
} }
```
## 使用组件实例方法
通过 ref 可以获取到 Calendar 实例并调用实例方法，通过 `with-cell` 可以屏蔽组件内部的 cell 选择器。
```html
<wd-button @click="openCalendar">打开日历</wd-button>
<wd-calendar ref="calendar" :with-cell="false" v-model="value" @confirm="handleConfirm" />
```
```typescript
import { ref } from 'vue'
import type { CalendarInstance } from '@/uni_modules/wot-design-uni/components/wd-calendar/types'
const calendar = ref<CalendarInstance>()
const value = ref<number>(Date.now())
function openCalendar() {
calendar.value?.open()
}
function closeCalendar() {
calendar.value?.close()
}
function handleConfirm({ value }) {
console.log(value)
}
``` ```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | --------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | ---------------- |
| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | | v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - |
| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | | type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - |
| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | | min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - |
@ -377,7 +417,7 @@ function handleConfirm4({ value }) {
| title | 弹出层标题 | string | - | 选择日期 | - | | title | 弹出层标题 | string | - | 选择日期 | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | false | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| inner-display-format | 自定义范围选择类型的面板内部回显，返回一个字符串 | function | - | - | - | | inner-display-format | 自定义范围选择类型的面板内部回显，返回一个字符串 | function | - | - | - |
@ -389,20 +429,20 @@ function handleConfirm4({ value }) {
| ellipsis | 是否超出隐藏 | boolean | - | false | - | | ellipsis | 是否超出隐藏 | boolean | - | false | - |
| align-right | 选择器的值靠右展示 | boolean | - | false | - | | align-right | 选择器的值靠右展示 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | - | | before-confirm | 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - | | <s>use-default-slot</s> | <s>使用默认插槽时设置该选项</s>，已废弃直接使用默认插槽即可。 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - | | <s>use-label-slot</s> | <s>使用 label 插槽时设置该选项</s>，已废弃直接使用 label 插槽即可。 | boolean | - | false | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| z-index | 弹窗层级 | number | - | 15 | - | | z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | | safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - | | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - | | rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | | immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发 picker-view 的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25 版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
| with-cell | 是否使用内置 cell 选择器 | boolean | - | true | $LOWEST_VERSION$ |
### FormItemRule 数据结构 ### FormItemRule 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
| --- | --- | --- | | --------- | ------------------------------------------------------- | ------------------------------------- |
| required | 是否为必选字段 | `boolean` | | required | 是否为必选字段 | `boolean` |
| message | 错误提示文案 | `string` | | message | 错误提示文案 | `string` |
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` | | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
@ -411,11 +451,11 @@ function handleConfirm4({ value }) {
## Events ## Events
| 事件名称 | 说明 | 参数 | 最低版本 | | 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | ------------------------------------ | ------------------------ | -------- | | -------- | -------------------------- | ----------- | -------- |
| confirm | 绑定值变化时触发 | `{ value }` | - | | confirm | 绑定值变化时触发 | `{ value }` | - |
| change | 点击面板日期时触发 | `{ value }` | - | | change | 点击面板日期时触发 | `{ value }` | - |
| cancel | 点击关闭按钮或者蒙层时触发 | -|-| | cancel | 点击关闭按钮或者蒙层时触发 | - | - |
| open | 日历打开时触发 | -|-| | open | 日历打开时触发 | - | - |
## Methods ## Methods

2
docs/component/col-picker.md
View File

@ -630,7 +630,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
| title | 弹出层标题 | string | - | - | - | | title | 弹出层标题 | string | - | - | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | false | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| column-change | 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish | function | - | - | - | | column-change | 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish | function | - | - | - |

2
docs/component/datetime-picker.md
View File

@ -268,7 +268,7 @@ const displayFormatTabLabel = (items) => {
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - | | confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
| label | 选择器左侧文案，label可以不传 | string | - | - | - | | label | 选择器左侧文案，label可以不传 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | false | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| formatter | 自定义弹出层选项文案的格式化函数，返回一个字符串 | function | - | - | - | | formatter | 自定义弹出层选项文案的格式化函数，返回一个字符串 | function | - | - | - |

2
docs/component/picker.md
View File

@ -252,7 +252,7 @@ function handleConfirm({ value }) {
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - | | confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | false | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - | | column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |

2
docs/component/select-picker.md
View File

@ -330,7 +330,7 @@ function handleConfirm({ value, selectedItems }) {
| title | 弹出层标题 | string | - | - | - | | title | 弹出层标题 | string | - | - | - |
| label | 选择器左侧文案 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - | | placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - | | disabled | 禁用 | boolean | - | false | - |
| loading | 加载中 | boolean | - | false | - | | loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - | | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - |
| readonly | 只读 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - |

21
src/pages/calendar/Index.vue
View File

@ -44,8 +44,9 @@
</wd-calendar> </wd-calendar>
</view> </view>
</demo-block> </demo-block>
<demo-block transparent title="open事件"> <demo-block title="组件实例事件">
<wd-calendar v-model="value17" @open="handleOpen" /> <wd-button @click="openCalendar">打开日历</wd-button>
<wd-calendar ref="calendarRef" v-model="value17" :with-cell="false" @confirm="handleConfirm5" />
</demo-block> </demo-block>
</page-wraper> </page-wraper>
<wd-message-box /> <wd-message-box />
@ -54,10 +55,8 @@
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import { dayjs } from '@/uni_modules/wot-design-uni' import { dayjs } from '@/uni_modules/wot-design-uni'
import type { CalendarDayItem, CalendarFormatter } from '@/uni_modules/wot-design-uni/components/wd-calendar-view/types' import type { CalendarDayItem, CalendarFormatter } from '@/uni_modules/wot-design-uni/components/wd-calendar-view/types'
import type { CalendarOnShortcutsClickOption } from '@/uni_modules/wot-design-uni/components/wd-calendar/types' import type { CalendarInstance, CalendarOnShortcutsClickOption } from '@/uni_modules/wot-design-uni/components/wd-calendar/types'
import { ref } from 'vue' import { ref } from 'vue'
import { useMessage } from '@/uni_modules/wot-design-uni'
const message = useMessage()
const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime()) const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime())
@ -78,6 +77,13 @@ const value14 = ref<number | null>(null)
const value15 = ref<number | null>(null) const value15 = ref<number | null>(null)
const value16 = ref<number>(Date.now()) const value16 = ref<number>(Date.now())
const value17 = ref<number>(Date.now()) const value17 = ref<number>(Date.now())
const calendarRef = ref<CalendarInstance>()
function openCalendar() {
calendarRef.value?.open()
}
const formatValue = ref<string>('') const formatValue = ref<string>('')
const formatter: CalendarFormatter = (day: CalendarDayItem) => { const formatter: CalendarFormatter = (day: CalendarDayItem) => {
const date = new Date(day.date) const date = new Date(day.date)
@ -171,8 +177,9 @@ function handleConfirm4({ value }: any) {
console.log(new Date(value).toString()) console.log(new Date(value).toString())
formatValue.value = new Date(value).toString() formatValue.value = new Date(value).toString()
} }
function handleOpen() {
message.alert('打开日历') function handleConfirm5({ value }: any) {
toast.success('已选择' + dayjs(value).format('YYYY年MM月DD日'))
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

3
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -218,10 +218,13 @@ $-calendar-day-fw: var(--wot-calendar-day-fw, 500) !default;
$-calendar-day-height: var(--wot-calendar-day-height, 64px) !default; $-calendar-day-height: var(--wot-calendar-day-height, 64px) !default;
$-calendar-month-width: var(--wot-calendar-month-width, 50px) !default; $-calendar-month-width: var(--wot-calendar-month-width, 50px) !default;
$-calendar-active-color: var(--wot-calendar-active-color, $-color-theme) !default; $-calendar-active-color: var(--wot-calendar-active-color, $-color-theme) !default;
$-calendar-selected-color: var(--wot-calendar-selected-color, $-color-white) !default;
$-calendar-disabled-color: var(--wot-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default; $-calendar-disabled-color: var(--wot-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default;
$-calendar-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default; $-calendar-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default;
$-calendar-active-border: var(--wot-calendar-active-border, 8px) !default; $-calendar-active-border: var(--wot-calendar-active-border, 8px) !default;
$-calendar-info-fs: var(--wot-calendar-info-fs, 10px) !default; $-calendar-info-fs: var(--wot-calendar-info-fs, 10px) !default;
$-calendar-item-margin-bottom: var(--wot-calendar-item-margin-bottom, 4px) !default;
/* checkbox */ /* checkbox */
$-checkbox-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离 $-checkbox-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离

25
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
View File

@ -44,6 +44,7 @@
height: $-calendar-day-height; height: $-calendar-day-height;
line-height: $-calendar-day-height; line-height: $-calendar-day-height;
text-align: center; text-align: center;
margin-bottom: $-calendar-item-margin-bottom;
@include when(disabled) { @include when(disabled) {
.wd-month__day-text { .wd-month__day-text {
@ -55,11 +56,11 @@
color: $-calendar-active-color; color: $-calendar-active-color;
} }
@include when(selected) { @include when(selected, multiple-selected) {
.wd-month__day-container { .wd-month__day-container {
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: $-calendar-selected-color;
} }
} }
@ -68,6 +69,12 @@
background: $-calendar-range-color; background: $-calendar-range-color;
} }
} }
@include when(multiple-middle) {
.wd-month__day-container {
background: $-calendar-active-color;
color: $-calendar-selected-color;
}
}
@include when(start) { @include when(start) {
&::after { &::after {
@ -87,8 +94,8 @@
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: $-calendar-selected-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
} }
} }
@ -106,18 +113,22 @@
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: $-calendar-selected-color;
border-radius: $-calendar-active-border; border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
} }
} }
@include when(same) { @include when(same) {
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: $-calendar-selected-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(last-row){
margin-bottom: 0;
}
} }
@include e(day-container) { @include e(day-container) {

89
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
View File

@ -3,13 +3,15 @@
<wd-toast selector="wd-month" /> <wd-toast selector="wd-month" />
<view class="month"> <view class="month">
<view class="wd-month"> <view class="wd-month">
<view class="wd-month__title">{{ monthTitle(date) }}</view> <view class="wd-month__title" v-if="showTitle">{{ monthTitle(date) }}</view>
<view class="wd-month__days"> <view class="wd-month__days">
<view <view
v-for="(item, index) in days" v-for="(item, index) in days"
:key="index" :key="index"
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`" :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
:style="firstDayStyle(index, item.date, firstDayOfWeek)" item.type ? dayTypeClass(item.type) : ''
}`"
:style="index === 0 ? firstDayStyle : ''"
@click="handleDateClick(index)" @click="handleDateClick(index)"
> >
<view class="wd-month__day-container"> <view class="wd-month__day-container">
@ -38,22 +40,23 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import wdToast from '../../wd-toast/wd-toast.vue' import wdToast from '../../wd-toast/wd-toast.vue'
import { computed, ref, watch } from 'vue' import { computed, ref, watch, type CSSProperties } from 'vue'
import { import {
compareDate, compareDate,
formatMonthTitle, formatMonthTitle,
getDateByDefaultTime, getDateByDefaultTime,
getDayByOffset, getDayByOffset,
getDayOffset, getDayOffset,
getFirstDayStyle,
getItemClass, getItemClass,
getMonthEndDay, getMonthEndDay,
getNextDay,
getPrevDay,
getWeekRange getWeekRange
} from '../utils' } from '../utils'
import { useToast } from '../../wd-toast' import { useToast } from '../../wd-toast'
import { deepClone, isArray, isFunction } from '../../common/util' import { deepClone, isArray, isFunction, objToStyle } from '../../common/util'
import { useTranslate } from '../../composables/useTranslate' import { useTranslate } from '../../composables/useTranslate'
import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types' import type { CalendarDayItem, CalendarDayType } from '../types'
import { monthProps } from './types' import { monthProps } from './types'
const props = defineProps(monthProps) const props = defineProps(monthProps)
@ -65,9 +68,15 @@ const days = ref<Array<CalendarDayItem>>([])
const toast = useToast('wd-month') const toast = useToast('wd-month')
const itemClass = computed(() => { const offset = computed(() => {
return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => { const firstDayOfWeek = props.firstDayOfWeek >= 7 ? props.firstDayOfWeek % 7 : props.firstDayOfWeek
return getItemClass(monthType, value, type) const offset = (7 + new Date(props.date).getDay() - firstDayOfWeek) % 7
return offset
})
const dayTypeClass = computed(() => {
return (monthType: CalendarDayType) => {
return getItemClass(monthType, props.value, props.type)
} }
}) })
@ -76,12 +85,21 @@ const monthTitle = computed(() => {
return formatMonthTitle(date) return formatMonthTitle(date)
} }
}) })
const firstDayStyle = computed(() => { const firstDayStyle = computed(() => {
return (index: number, date: number, firstDayOfWeek: number) => { const dayStyle: CSSProperties = {}
return getFirstDayStyle(index, date, firstDayOfWeek) dayStyle.marginLeft = `${(100 / 7) * offset.value}%`
} return objToStyle(dayStyle)
}) })
const isLastRow = (date: number) => {
const currentDate = new Date(date)
const currentDay = currentDate.getDate()
const daysInMonth = getMonthEndDay(currentDate.getFullYear(), currentDate.getMonth() + 1)
const totalDaysShown = offset.value + daysInMonth
const totalRows = Math.ceil(totalDaysShown / 7)
return Math.ceil((offset.value + currentDay) / 7) === totalRows
}
watch( watch(
[() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter], [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
() => { () => {
@ -141,17 +159,29 @@ function getDateType(date: number): CalendarDayType {
} }
function getDatesType(date: number): CalendarDayType { function getDatesType(date: number): CalendarDayType {
if (!isArray(props.value)) return '' const { value } = props
let type: CalendarDayType = '' let type: CalendarDayType = ''
props.value.some((item) => {
if (compareDate(date, item) === 0) { if (!isArray(value)) return type
type = 'selected' const isSelected = (day: number) => {
return true return value.some((item) => compareDate(day, item) === 0)
} }
return false if (isSelected(date)) {
}) const prevDay = getPrevDay(date)
const nextDay = getNextDay(date)
const prevSelected = isSelected(prevDay)
const nextSelected = isSelected(nextDay)
if (prevSelected && nextSelected) {
type = 'multiple-middle'
} else if (prevSelected) {
type = 'end'
} else if (nextSelected) {
type = 'start'
} else {
type = 'multiple-selected'
}
}
return type return type
} }
@ -251,16 +281,12 @@ function handleDateChange(date: CalendarDayItem) {
} }
function handleDatesChange(date: CalendarDayItem) { function handleDatesChange(date: CalendarDayItem) {
if (date.disabled) return if (date.disabled) return
const value = deepClone(isArray(props.value) ? props.value : []) const currentValue = deepClone(isArray(props.value) ? props.value : [])
if (date.type !== 'selected') { const dateIndex = currentValue.findIndex((item) => item && compareDate(item, date.date) === 0)
value.push(getDate(date.date)) const value = dateIndex === -1 ? [...currentValue, getDate(date.date)] : currentValue.filter((_, index) => index !== dateIndex)
} else { emit('change', { value })
value.splice(value.indexOf(date.date), 1)
}
emit('change', {
value
})
} }
function handleDateRangeChange(date: CalendarDayItem) { function handleDateRangeChange(date: CalendarDayItem) {
if (date.disabled) return if (date.disabled) return
@ -345,7 +371,8 @@ function getFormatterDate(date: number, day: string | number, type?: CalendarDay
topInfo: '', topInfo: '',
bottomInfo: '', bottomInfo: '',
type, type,
disabled: compareDate(date, props.minDate) === -1 || compareDate(date, props.maxDate) === 1 disabled: compareDate(date, props.minDate) === -1 || compareDate(date, props.maxDate) === 1,
isLastRow: isLastRow(date)
} }
if (props.formatter) { if (props.formatter) {
if (isFunction(props.formatter)) { if (isFunction(props.formatter)) {

3
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/types.ts
View File

@ -15,5 +15,6 @@ export const monthProps = {
allowSameDay: makeBooleanProp(false), allowSameDay: makeBooleanProp(false),
defaultTime: { defaultTime: {
type: [Array] as PropType<Array<number[]>> type: [Array] as PropType<Array<number[]>>
} },
showTitle: makeBooleanProp(true)
} }

30
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -26,6 +26,7 @@
:range-prompt="rangePrompt" :range-prompt="rangePrompt"
:allow-same-day="allowSameDay" :allow-same-day="allowSameDay"
:default-time="defaultTime" :default-time="defaultTime"
:showTitle="index !== 0"
@change="handleDateChange" @change="handleDateChange"
/> />
</view> </view>
@ -131,17 +132,18 @@ const weekLabel = computed(() => {
// 滚动区域的高度 // 滚动区域的高度
const scrollHeight = computed(() => { const scrollHeight = computed(() => {
const scrollHeight: number = timeType.value ? (props.panelHeight || 378) - 125 : props.panelHeight || 378 const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
return scrollHeight return scrollHeight
}) })
// 月份日期和月份高度 // 月份日期和月份高度
const months = computed<MonthInfo[]>(() => { const months = computed<MonthInfo[]>(() => {
return getMonths(props.minDate, props.maxDate).map((month) => { return getMonths(props.minDate, props.maxDate).map((month, index) => {
const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7 const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1) const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
const rows = Math.ceil((offset + totalDay) / 7)
return { return {
height: (offset + totalDay > 35 ? 64 * 6 : 64 * 5) + 45, height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
date: month date: month
} }
}) })
@ -190,7 +192,9 @@ async function scrollIntoView() {
await pause() await pause()
let activeDate: number | null = 0 let activeDate: number | null = 0
if (isArray(props.value)) { if (isArray(props.value)) {
activeDate = props.value![0] // 对数组按时间排序,取第一个值
const sortedValue = [...props.value].sort((a, b) => (a || 0) - (b || 0))
activeDate = sortedValue[0]
} else if (isNumber(props.value)) { } else if (isNumber(props.value)) {
activeDate = props.value activeDate = props.value
} }
@ -200,16 +204,28 @@ async function scrollIntoView() {
} }
let top: number = 0 let top: number = 0
let activeMonthIndex = -1
for (let index = 0; index < months.value.length; index++) { for (let index = 0; index < months.value.length; index++) {
if (compareMonth(months.value[index].date, activeDate) === 0) { if (compareMonth(months.value[index].date, activeDate) === 0) {
activeMonthIndex = index
// 找到选中月份后,计算选中日期在月份中的位置
const date = new Date(activeDate)
const day = date.getDate()
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
const offset = (7 + firstDay.getDay() - props.firstDayOfWeek) % 7
const row = Math.floor((offset + day - 1) / 7)
// 每行高度64px,每行加4px margin
top += row * 64 + row * 4
break break
} }
top += months.value[index] ? Number(months.value[index].height) : 0 top += months.value[index] ? Number(months.value[index].height) : 0
} }
scrollTop.value = 0 scrollTop.value = 0
// 等待渲染完毕 if (top > 0) {
await pause() await pause()
scrollTop.value = top // 如果不是第一个月才加45
scrollTop.value = top + (activeMonthIndex > 0 ? 45 : 0)
}
} }
/** /**
* 获取时间 picker 的数据 * 获取时间 picker 的数据
@ -341,7 +357,7 @@ function doSetSubtitle(scrollTop: number) {
let height: number = 0 // 月份高度和 let height: number = 0 // 月份高度和
for (let index = 0; index < months.value.length; index++) { for (let index = 0; index < months.value.length; index++) {
height = height + months.value[index].height height = height + months.value[index].height
if (scrollTop < height + 45) { if (scrollTop < height) {
scrollIndex.value = index scrollIndex.value = index
return return
} }

3
src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts
View File

@ -70,7 +70,7 @@ export const calendarViewProps = {
export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps> export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>
export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' | 'multiple-middle' | 'multiple-selected'
export type CalendarDayItem = { export type CalendarDayItem = {
date: number date: number
@ -79,6 +79,7 @@ export type CalendarDayItem = {
bottomInfo?: string bottomInfo?: string
type?: CalendarDayType type?: CalendarDayType
disabled?: boolean disabled?: boolean
isLastRow?: boolean
} }
export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem

23
src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
View File

@ -116,24 +116,6 @@ export function getWeekLabel(index: number) {
return weeks.value[index] return weeks.value[index]
} }
/**
* 获取一个月第一天的样式
* @param {number} index
* @param {timestamp} date
* @param {number} firstDayOfWeek
*/
export function getFirstDayStyle(index: number, date: number, firstDayOfWeek: number) {
if (firstDayOfWeek >= 7) {
firstDayOfWeek = firstDayOfWeek % 7
}
if (index !== 0) return ''
const offset = (7 + new Date(date).getDay() - firstDayOfWeek) % 7
return 'margin-left: ' + (100 / 7) * offset + '%'
}
/** /**
* 格式化年份 * 格式化年份
* @param {timestamp} date * @param {timestamp} date
@ -222,6 +204,9 @@ export function getDayByOffset(date: number, offset: number) {
return dateValue.getTime() return dateValue.getTime()
} }
export const getPrevDay = (date: number) => getDayByOffset(date, -1)
export const getNextDay = (date: number) => getDayByOffset(date, 1)
/** /**
* 获取月份偏移量 * 获取月份偏移量
* @param {timestamp} date1 * @param {timestamp} date1
@ -431,7 +416,7 @@ export function getWeekNumber(date: number | Date) {
return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7) return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7)
} }
export function getItemClass(monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) { export function getItemClass(monthType: CalendarDayType, value: number | null | (number | null)[], type: CalendarType) {
const classList = ['is-' + monthType] const classList = ['is-' + monthType]
if (type.indexOf('range') > -1 && isArray(value)) { if (type.indexOf('range') > -1 && isArray(value)) {

14
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss
View File

@ -45,6 +45,7 @@
height: $-calendar-day-height; height: $-calendar-day-height;
line-height: $-calendar-day-height; line-height: $-calendar-day-height;
text-align: center; text-align: center;
margin-bottom: $-calendar-item-margin-bottom;
@include when(disabled) { @include when(disabled) {
.wd-year__month-text { .wd-year__month-text {
@ -70,7 +71,7 @@
} }
@include when(start) { @include when(start) {
color: #fff; color: $-calendar-selected-color;
&::after { &::after {
position: absolute; position: absolute;
@ -84,7 +85,7 @@
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
} }
&.is-without-end::after { &.is-without-end::after {
@ -93,7 +94,7 @@
} }
@include when(end) { @include when(end) {
color: #fff; color: $-calendar-selected-color;
&::after { &::after {
position: absolute; position: absolute;
@ -107,18 +108,21 @@
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
} }
} }
@include when(same) { @include when(same) {
color: #fff; color: $-calendar-selected-color;
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(last-row){
margin-bottom: 0;
}
} }
@include e(month-text) { @include e(month-text) {

3
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/types.ts
View File

@ -15,5 +15,6 @@ export const yearProps = {
allowSameDay: makeBooleanProp(false), allowSameDay: makeBooleanProp(false),
defaultTime: { defaultTime: {
type: [Array] as PropType<Array<number[]>> type: [Array] as PropType<Array<number[]>>
} },
showTitle: makeBooleanProp(true)
} }

18
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -2,12 +2,14 @@
<wd-toast selector="wd-year" /> <wd-toast selector="wd-year" />
<view class="wd-year year"> <view class="wd-year year">
<view class="wd-year__title">{{ yearTitle(date) }}</view> <view class="wd-year__title" v-if="showTitle">{{ yearTitle(date) }}</view>
<view class="wd-year__months"> <view class="wd-year__months">
<view <view
v-for="(item, index) in months" v-for="(item, index) in months"
:key="index" :key="index"
:class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`" :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
item.type ? monthTypeClass(item.type) : ''
}`"
@click="handleDateClick(index)" @click="handleDateClick(index)"
> >
<view class="wd-year__month-top">{{ item.topInfo }}</view> <view class="wd-year__month-top">{{ item.topInfo }}</view>
@ -36,7 +38,7 @@ import { useToast } from '../../wd-toast'
import { useTranslate } from '../../composables/useTranslate' import { useTranslate } from '../../composables/useTranslate'
import { dayjs } from '../../common/dayjs' import { dayjs } from '../../common/dayjs'
import { yearProps } from './types' import { yearProps } from './types'
import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types' import type { CalendarDayItem, CalendarDayType } from '../types'
const props = defineProps(yearProps) const props = defineProps(yearProps)
const emit = defineEmits(['change']) const emit = defineEmits(['change'])
@ -46,9 +48,9 @@ const { translate } = useTranslate('calendar-view')
const months = ref<CalendarDayItem[]>([]) const months = ref<CalendarDayItem[]>([])
const itemClass = computed(() => { const monthTypeClass = computed(() => {
return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => { return (monthType: CalendarDayType) => {
return getItemClass(monthType, value, type) return getItemClass(monthType, props.value, props.type)
} }
}) })
@ -179,8 +181,10 @@ function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
topInfo: '', topInfo: '',
bottomInfo: '', bottomInfo: '',
type, type,
disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1 disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1,
isLastRow: month >= 8
} }
if (props.formatter) { if (props.formatter) {
if (isFunction(props.formatter)) { if (isFunction(props.formatter)) {
monthObj = props.formatter(monthObj) monthObj = props.formatter(monthObj)

13
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -14,6 +14,7 @@
:range-prompt="rangePrompt" :range-prompt="rangePrompt"
:allow-same-day="allowSameDay" :allow-same-day="allowSameDay"
:default-time="defaultTime" :default-time="defaultTime"
:showTitle="index !== 0"
@change="handleDateChange" @change="handleDateChange"
/> />
</view> </view>
@ -45,16 +46,16 @@ const scrollIndex = ref<number>(0) // 当前显示的年份索引
// 滚动区域的高度 // 滚动区域的高度
const scrollHeight = computed(() => { const scrollHeight = computed(() => {
const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16) const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
return scrollHeight return scrollHeight
}) })
// 年份信息 // 年份信息
const years = computed<YearInfo[]>(() => { const years = computed<YearInfo[]>(() => {
return getYears(props.minDate, props.maxDate).map((year) => { return getYears(props.minDate, props.maxDate).map((year, index) => {
return { return {
date: year, date: year,
height: 237 height: index === 0 ? 200 : 245
} }
}) })
}) })
@ -89,8 +90,10 @@ async function scrollIntoView() {
top += years.value[index] ? Number(years.value[index].height) : 0 top += years.value[index] ? Number(years.value[index].height) : 0
} }
scrollTop.value = 0 scrollTop.value = 0
if (top > 0) {
await pause() await pause()
scrollTop.value = top scrollTop.value = top + 45
}
} }
const yearScroll = (event: { detail: { scrollTop: number } }) => { const yearScroll = (event: { detail: { scrollTop: number } }) => {
@ -109,7 +112,7 @@ function doSetSubtitle(scrollTop: number) {
let height: number = 0 // 月份高度和 let height: number = 0 // 月份高度和
for (let index = 0; index < years.value.length; index++) { for (let index = 0; index < years.value.length; index++) {
height = height + years.value[index].height height = height + years.value[index].height
if (scrollTop < height + 45) { if (scrollTop < height) {
scrollIndex.value = index scrollIndex.value = index
return return
} }

23
src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
View File

@ -1,13 +1,13 @@
/* /*
* @Author: weisheng * @Author: weisheng
* @Date: 2024-03-15 20:40:34 * @Date: 2024-03-15 20:40:34
* @LastEditTime: 2024-06-09 14:38:57 * @LastEditTime: 2024-12-08 19:13:33
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
* 记得注释 * 记得注释
*/ */
import type { PropType } from 'vue' import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props' import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types' import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
import type { FormItemRule } from '../wd-form/types' import type { FormItemRule } from '../wd-form/types'
@ -72,14 +72,6 @@ export const calendarProps = {
* 设置左侧标题宽度 * 设置左侧标题宽度
*/ */
labelWidth: String, labelWidth: String,
/**
* 使用 label 插槽时设置该选项
*/
useLabelSlot: makeBooleanProp(false),
/**
* 使用默认插槽时设置该选项
*/
useDefaultSlot: makeBooleanProp(false),
/** /**
* 禁用 * 禁用
*/ */
@ -184,7 +176,12 @@ export const calendarProps = {
/** /**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/ */
immediateChange: makeBooleanProp(false) immediateChange: makeBooleanProp(false),
/**
* 是否使用内置单元格
* 默认为 true，使用内置单元格
*/
withCell: makeBooleanProp(true)
} }
export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
@ -211,3 +208,7 @@ export type CalendarExpose = {
/** 打开时间选择器弹窗 */ /** 打开时间选择器弹窗 */
open: () => void open: () => void
} }
export type CalendarProps = ExtractPropTypes<typeof calendarProps>
export type CalendarInstance = ComponentPublicInstance<CalendarExpose, CalendarProps>

9
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view :class="`wd-calendar ${cell.border.value ? 'is-border' : ''} ${customClass}`"> <view :class="`wd-calendar ${cell.border.value ? 'is-border' : ''} ${customClass}`">
<view class="wd-calendar__field" @click="open"> <view class="wd-calendar__field" @click="open" v-if="withCell">
<slot v-if="useDefaultSlot"></slot> <slot v-if="$slots.default"></slot>
<view <view
v-else v-else
:class="`wd-calendar__cell ${disabled ? 'is-disabled' : ''} ${readonly ? 'is-readonly' : ''} ${alignRight ? 'is-align-right' : ''} ${ :class="`wd-calendar__cell ${disabled ? 'is-disabled' : ''} ${readonly ? 'is-readonly' : ''} ${alignRight ? 'is-align-right' : ''} ${
@ -9,12 +9,11 @@
} ${size ? 'is-' + size : ''} ${center ? 'is-center' : ''}`" } ${size ? 'is-' + size : ''} ${center ? 'is-center' : ''}`"
> >
<view <view
v-if="label || useLabelSlot" v-if="label || $slots.label"
:class="`wd-calendar__label ${isRequired ? 'is-required' : ''} ${customLabelClass}`" :class="`wd-calendar__label ${isRequired ? 'is-required' : ''} ${customLabelClass}`"
:style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''" :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
> >
<block v-if="label">{{ label }}</block> <slot name="label">{{ label }}</slot>
<slot v-else name="label"></slot>
</view> </view>
<view class="wd-calendar__body"> <view class="wd-calendar__body">
<view class="wd-calendar__value-wraper"> <view class="wd-calendar__value-wraper">