diff --git a/docs/component/calendar-view.md b/docs/component/calendar-view.md index 2b70c99f..17a82e0d 100644 --- a/docs/component/calendar-view.md +++ b/docs/component/calendar-view.md @@ -137,14 +137,27 @@ function handleChange({ value }) { 设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下： -| 属性 | 类型 | 说明 | 最低版本 | -| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| type | string | 日期类型，'selected' - 单日期选中，'start' - 范围开始日期，'end' - 范围结束日期，'middle' - 范围开始与结束之间的日期，'same' - 范围开始与结束日期同一天 | - | -| date | timestamp | 13 位的时间戳 | - | -| text | string | 日期文本内容 | - | -| topInfo | string | 上方提示信息 | - | -| bottomInfo | string | 下方提示信息 | - | -| disabled | boolean | 是否禁用 | - | +| 属性 | 类型 | 说明 | 最低版本 | +| ---------- | --------------- | ------------------------------------------- | -------- | +| type | CalendarDayType | 可选值见[CalendarDayType](#calendardaytype) | - | +| date | timestamp | 13 位的时间戳 | - | +| text | string | 日期文本内容 | - | +| topInfo | string | 上方提示信息 | - | +| bottomInfo | string | 下方提示信息 | - | +| disabled | boolean | 是否禁用 | - | + +### CalendarDayType + +| 类型 | 说明 | +| ----------------- | ------------------------------------ | +| selected | 单日期选中 | +| start | 范围开始日期 | +| end | 范围结束日期 | +| middle | 范围开始与结束之间的日期 | +| same | 范围开始与结束日期同一天 | +| current | 当前日期 | +| multiple-middle | 多日期范围选择，开始与结束之间的日期 | +| multiple-selected | 多日期范围选择，选中的日期 | ```html @@ -218,23 +231,23 @@ function handleChange({ value }) { ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ----------------- | ---------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | -| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | -| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | -| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | -| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | -| first-day-of-week | 周起始天 | number | - | 0 | - | -| formatter | 日期格式化函数 | function | - | - | - | -| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - | -| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - | -| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - | -| show-panel-title | 是否展示面板标题，自动计算当前滚动的日期月份 | boolean | - | true | - | -| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - | -| panel-height | 可滚动面板的高度 | number | - | 378 | - | -| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - | -| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - | -| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | +| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | +| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | +| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | +| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | +| first-day-of-week | 周起始天 | number | - | 0 | - | +| formatter | 日期格式化函数 | function | - | - | - | +| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - | +| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - | +| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - | +| show-panel-title | 是否展示面板标题，自动计算当前滚动的日期月份 | boolean | - | true | - | +| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - | +| panel-height | 可滚动面板的高度 | number | - | 378 | - | +| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - | +| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - | +| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发 picker-view 的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25 版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | ## Events diff --git a/docs/component/calendar.md b/docs/component/calendar.md index 806e65bb..e5be9e3a 100644 --- a/docs/component/calendar.md +++ b/docs/component/calendar.md @@ -145,14 +145,27 @@ function handleConfirm({ value }) { 设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下： -| 属性 | 类型 | 说明 | 最低版本 | -| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| type | string | 日期类型，'selected' - 单日期选中，'start' - 范围开始日期，'end' - 范围结束日期，'middle' - 范围开始与结束之间的日期，'same' - 范围开始与结束日期同一天 | - | -| date | timestamp | 13 位的时间戳 | - | -| text | string | 日期文本内容 | - | -| topInfo | string | 上方提示信息 | - | -| bottomInfo | string | 下方提示信息 | - | -| disabled | boolean | 是否禁用 | - | +| 属性 | 类型 | 说明 | 最低版本 | +| ---------- | --------------- | ------------------------------------------- | -------- | +| type | CalendarDayType | 可选值见[CalendarDayType](#calendardaytype) | - | +| date | timestamp | 13 位的时间戳 | - | +| text | string | 日期文本内容 | - | +| topInfo | string | 上方提示信息 | - | +| bottomInfo | string | 下方提示信息 | - | +| disabled | boolean | 是否禁用 | - | + +### CalendarDayType + +| 类型 | 说明 | 最低版本 | +| ----------------- | ------------------------------------ | ---------------- | +| selected | 单日期选中 | - | +| start | 范围开始日期 | - | +| end | 范围结束日期 | - | +| middle | 范围开始与结束之间的日期 | - | +| same | 范围开始与结束日期同一天 | - | +| current | 当前日期 | - | +| multiple-middle | 多日期范围选择，开始与结束之间的日期 | $LOWEST_VERSION$ | +| multiple-selected | 多日期范围选择，选中的日期 | $LOWEST_VERSION$ | ```html @@ -210,7 +223,7 @@ const formatter = (day) => { ```html { return [startDate, endDate] } - function handleConfirm({ value }) { console.log(value) } @@ -319,7 +331,6 @@ const beforeConfirm = ({ value, resolve }) => { function handleConfirm({ value }) { console.log(value) } - ``` ## 最大范围限制 @@ -340,7 +351,7 @@ function handleConfirm({ value }) { ```html 当前选中日期：{{ formatValue }} - + 选择日期 ``` @@ -352,70 +363,99 @@ const formatValue = ref('') function handleConfirm4({ value }) { formatValue.value = new Date(value).toString() } +``` +## 使用组件实例方法 + +通过 ref 可以获取到 Calendar 实例并调用实例方法，通过 `with-cell` 可以屏蔽组件内部的 cell 选择器。 + +```html +打开日历 + + +``` + +```typescript +import { ref } from 'vue' +import type { CalendarInstance } from '@/uni_modules/wot-design-uni/components/wd-calendar/types' + +const calendar = ref() +const value = ref(Date.now()) + +function openCalendar() { + calendar.value?.open() +} + +function closeCalendar() { + calendar.value?.close() +} + +function handleConfirm({ value }) { + console.log(value) +} ``` ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ---------------------- | --------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- | -| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | -| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | -| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | -| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | -| first-day-of-week | 周起始天 | number | - | 0 | - | -| formatter | 日期格式化函数 | function | - | - | - | -| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - | -| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - | -| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - | -| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - | -| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - | -| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - | -| show-confirm | 是否显示确定按钮 | boolean | - | true | - | -| show-type-switch | 是否显示类型切换功能 | boolean | - | false | - | -| shortcuts | 快捷选项，为对象数组，其中对象的 `text` 必传 | array | - | - | - | -| title | 弹出层标题 | string | - | 选择日期 | - | -| label | 选择器左侧文案 | string | - | - | - | -| placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | -| readonly | 只读 | boolean | - | false | - | -| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | -| inner-display-format | 自定义范围选择类型的面板内部回显，返回一个字符串 | function | - | - | - | -| size | 设置选择器大小 | string | large | - | - | -| label-width | 设置左侧标题宽度 | string | - | 33% | - | -| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | -| required | 必填样式 | boolean | - | false | - | -| center | 是否垂直居中 | boolean | - | false | - | -| ellipsis | 是否超出隐藏 | boolean | - | false | - | -| align-right | 选择器的值靠右展示 | boolean | - | false | - | -| before-confirm | 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | - | -| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - | -| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - | -| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | -| z-index | 弹窗层级 | number | - | 15 | - | -| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | -| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - | -| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - | -| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 | - +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | ---------------- | +| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - | +| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - | +| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - | +| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - | +| first-day-of-week | 周起始天 | number | - | 0 | - | +| formatter | 日期格式化函数 | function | - | - | - | +| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - | +| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - | +| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - | +| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - | +| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - | +| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - | +| show-confirm | 是否显示确定按钮 | boolean | - | true | - | +| show-type-switch | 是否显示类型切换功能 | boolean | - | false | - | +| shortcuts | 快捷选项，为对象数组，其中对象的 `text` 必传 | array | - | - | - | +| title | 弹出层标题 | string | - | 选择日期 | - | +| label | 选择器左侧文案 | string | - | - | - | +| placeholder | 选择器占位符 | string | - | 请选择 | - | +| disabled | 禁用 | boolean | - | false | - | +| readonly | 只读 | boolean | - | false | - | +| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | +| inner-display-format | 自定义范围选择类型的面板内部回显，返回一个字符串 | function | - | - | - | +| size | 设置选择器大小 | string | large | - | - | +| label-width | 设置左侧标题宽度 | string | - | 33% | - | +| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - | +| required | 必填样式 | boolean | - | false | - | +| center | 是否垂直居中 | boolean | - | false | - | +| ellipsis | 是否超出隐藏 | boolean | - | false | - | +| align-right | 选择器的值靠右展示 | boolean | - | false | - | +| before-confirm | 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | - | +| use-default-slot | 使用默认插槽时设置该选项，已废弃直接使用默认插槽即可。 | boolean | - | false | - | +| use-label-slot | 使用 label 插槽时设置该选项，已废弃直接使用 label 插槽即可。 | boolean | - | false | - | +| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - | +| z-index | 弹窗层级 | number | - | 15 | - | +| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - | +| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - | +| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - | +| 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 数据结构 -| 键名 | 说明 | 类型 | -| --- | --- | --- | -| required | 是否为必选字段 | `boolean` | -| message | 错误提示文案 | `string` | +| 键名 | 说明 | 类型 | +| --------- | ------------------------------------------------------- | ------------------------------------- | +| required | 是否为必选字段 | `boolean` | +| message | 错误提示文案 | `string` | | validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` | -| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` | +| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` | ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -| -------- | ------------------------------------ | ------------------------ | -------- | -| confirm | 绑定值变化时触发 | `{ value }` | - | -| change | 点击面板日期时触发 | `{ value }` | - | -| cancel | 点击关闭按钮或者蒙层时触发 | -|-| -| open | 日历打开时触发 | -|-| +| 事件名称 | 说明 | 参数 | 最低版本 | +| -------- | -------------------------- | ----------- | -------- | +| confirm | 绑定值变化时触发 | `{ value }` | - | +| change | 点击面板日期时触发 | `{ value }` | - | +| cancel | 点击关闭按钮或者蒙层时触发 | - | - | +| open | 日历打开时触发 | - | - | ## Methods diff --git a/docs/component/col-picker.md b/docs/component/col-picker.md index 8cbe9232..f458c445 100644 --- a/docs/component/col-picker.md +++ b/docs/component/col-picker.md @@ -630,7 +630,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => { | title | 弹出层标题 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - | | placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | +| disabled | 禁用 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | column-change | 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish | function | - | - | - | diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md index aaf5c55e..e1fed887 100644 --- a/docs/component/datetime-picker.md +++ b/docs/component/datetime-picker.md @@ -268,7 +268,7 @@ const displayFormatTabLabel = (items) => { | confirm-button-text | 确认按钮文案 | string | - | 完成 | - | | label | 选择器左侧文案，label可以不传 | string | - | - | - | | placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | +| disabled | 禁用 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | formatter | 自定义弹出层选项文案的格式化函数，返回一个字符串 | function | - | - | - | diff --git a/docs/component/picker.md b/docs/component/picker.md index a7314cf1..2e338b38 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -252,7 +252,7 @@ function handleConfirm({ value }) { | confirm-button-text | 确认按钮文案 | string | - | 完成 | - | | label | 选择器左侧文案 | string | - | - | - | | placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | +| disabled | 禁用 | boolean | - | false | - | | readonly | 只读 | boolean | - | false | - | | display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - | | column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - | diff --git a/docs/component/select-picker.md b/docs/component/select-picker.md index 7a95febf..9d74f429 100644 --- a/docs/component/select-picker.md +++ b/docs/component/select-picker.md @@ -330,7 +330,7 @@ function handleConfirm({ value, selectedItems }) { | title | 弹出层标题 | string | - | - | - | | label | 选择器左侧文案 | string | - | - | - | | placeholder | 选择器占位符 | string | - | 请选择 | - | -| disabled | 禁用 | boolean | - | fasle | - | +| disabled | 禁用 | boolean | - | false | - | | loading | 加载中 | boolean | - | false | - | | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | String | - | #4D80F0 | - | | readonly | 只读 | boolean | - | false | - | diff --git a/src/pages/calendar/Index.vue b/src/pages/calendar/Index.vue index 40eef71d..a50f8a7f 100644 --- a/src/pages/calendar/Index.vue +++ b/src/pages/calendar/Index.vue @@ -44,8 +44,9 @@ - - + + 打开日历 + @@ -54,10 +55,8 @@ import { useToast } 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 { 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 { useMessage } from '@/uni_modules/wot-design-uni' -const message = useMessage() const minDate = ref(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime()) @@ -78,6 +77,13 @@ const value14 = ref(null) const value15 = ref(null) const value16 = ref(Date.now()) const value17 = ref(Date.now()) + +const calendarRef = ref() + +function openCalendar() { + calendarRef.value?.open() +} + const formatValue = ref('') const formatter: CalendarFormatter = (day: CalendarDayItem) => { const date = new Date(day.date) @@ -171,8 +177,9 @@ function handleConfirm4({ value }: any) { console.log(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日')) } diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss index 26364f54..f7016a32 100644 --- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss +++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss @@ -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-month-width: var(--wot-calendar-month-width, 50px) !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-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default; $-calendar-active-border: var(--wot-calendar-active-border, 8px) !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-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离 diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss index 3ed3d98a..a60250ab 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss @@ -44,6 +44,7 @@ height: $-calendar-day-height; line-height: $-calendar-day-height; text-align: center; + margin-bottom: $-calendar-item-margin-bottom; @include when(disabled) { .wd-month__day-text { @@ -55,11 +56,11 @@ color: $-calendar-active-color; } - @include when(selected) { + @include when(selected, multiple-selected) { .wd-month__day-container { border-radius: $-calendar-active-border; background: $-calendar-active-color; - color: #fff; + color: $-calendar-selected-color; } } @@ -68,6 +69,12 @@ background: $-calendar-range-color; } } + @include when(multiple-middle) { + .wd-month__day-container { + background: $-calendar-active-color; + color: $-calendar-selected-color; + } + } @include when(start) { &::after { @@ -87,8 +94,8 @@ .wd-month__day-container { background: $-calendar-active-color; - color: #fff; - border-radius: $-calendar-active-border; + color: $-calendar-selected-color; + border-radius: $-calendar-active-border 0 0 $-calendar-active-border; } } @@ -106,18 +113,22 @@ .wd-month__day-container { background: $-calendar-active-color; - color: #fff; - border-radius: $-calendar-active-border; + color: $-calendar-selected-color; + border-radius: 0 $-calendar-active-border $-calendar-active-border 0; } } @include when(same) { .wd-month__day-container { background: $-calendar-active-color; - color: #fff; + color: $-calendar-selected-color; border-radius: $-calendar-active-border; } } + + @include when(last-row){ + margin-bottom: 0; + } } @include e(day-container) { diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue index 6b3bde2e..64442eb8 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue @@ -3,13 +3,15 @@ - {{ monthTitle(date) }} + {{ monthTitle(date) }} @@ -38,22 +40,23 @@ export default {