日历组件新增小红点 #640
日历组件新增小红点 #640
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改主要涉及对日历和日期时间选择器组件的功能扩展。新增了 Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (14)
src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts (1)
82-82: 新增的isDot属性看起来不错！这个改动很好地实现了PR的目标，为日历组件添加了小红点功能。代码简洁明了，不影响现有功能。
为了提高代码的可读性和可维护性，建议添加一个简短的注释来解释
isDot属性的用途。例如：isDot?: boolean // 是否显示日期下方的小红点这样可以帮助其他开发者更快地理解这个属性的作用。
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss (1)
128-130: 新增的徽章样式看起来不错，但可以考虑进一步优化。新增的
.wd-badge类的display: block;设置是合理的，这将确保徽章占据其容器的全宽并开始新的一行。这与PR目标中提到的添加小红点功能相符。然而，为了更精确地控制徽章的位置和大小，您可能想要考虑添加一些额外的样式属性。
建议您考虑添加以下属性来进一步优化徽章的样式：
.wd-badge{ display: block; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: red; + margin: 2px auto 0; }这些额外的样式将使徽章呈现为一个小红点，并在月份文本上方居中显示。请根据您的具体需求调整尺寸和颜色。
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss (1)
130-130: 建议移除多余的空行在第130行添加的空行会在
.wd-month__day-container和.wd-month__day-text规则之间创建额外的空间。为了保持代码的紧凑性和一致性，建议移除这个额外的空行。应用以下更改以改善代码组织：
} } - @include e(day-text) {src/pages/calendarView/Index.vue (2)
83-83: 建议移除调试用的 console.log 语句在生产环境中保留
console.log语句可能会影响性能，并可能泄露敏感信息。建议在提交代码前删除此调试语句。- console.log(month)如果这个日志对于开发或调试很重要，可以考虑使用条件日志或专门的日志库，以便在生产环境中禁用它。
100-105: 范围选择的起始和结束日期标记看起来不错，建议小幅改进为范围选择的起始和结束日期添加
isDot标记是一个很好的改进。这样可以在视觉上更好地突出显示这些重要的日期。实现逻辑看起来正确，符合 PR 的目标。不过，为了保持一致性，建议也为 'same' 类型的日期（即起始和结束日期相同的情况）添加
isDot标记。建议修改如下：
if (day.type === 'start' || day.type === 'end' || day.type === 'same') { day.isDot = true } if (day.type === 'start') { day.bottomInfo = '开始' } else if (day.type === 'end') { day.bottomInfo = '结束' } else if (day.type === 'same') { day.bottomInfo = '开始/结束' }这样可以确保所有特殊的范围选择日期都有一致的视觉标记。
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue (1)
14-18: 新功能实现正确，建议更新文档新增的
<wd-badge>组件很好地实现了日历组件的小红点功能。实现方式简洁明了，并且通过is-dot属性可以灵活控制小红点的显示。为了帮助其他开发者更好地理解和使用这个新功能，建议：
- 在组件的文档中添加关于
isDot属性的说明，包括其用途和如何使用。- 如果可能，提供一个简单的示例代码，展示如何在日历中启用和禁用小红点。
- 考虑在文档中解释
top和right属性的作用，以及如何根据需要调整小红点的位置。这些文档更新将有助于确保新功能的可用性和可维护性。
src/pages/datetimePicker/Index.vue (2)
36-44: 自定义图标功能实现得很好！新增的自定义图标功能实现得很好，使用了插槽来实现灵活的定制。条件渲染根据选择器的状态显示不同的图标，这是一个很好的用户体验设计。
为了提高可访问性，建议为图标添加一个
aria-label属性，以便屏幕阅读器用户能够理解图标的功能。例如：- <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" /> + <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" :aria-label="isEmpty ? '打开选择器' : '清除选择'" />
53-54: 脚本部分的更改实现得很好！新增的自定义图标功能在脚本部分的实现非常出色，遵循了 Vue 3 Composition API 的最佳实践。
isEmpty计算属性和rightIconClick函数的逻辑清晰且高效。为了提高类型安全性，建议在使用
dateTimePickerRef.value时进行空值检查，以避免可能的运行时错误。例如：function rightIconClick() { if (isEmpty.value) { - dateTimePickerRef.value!.open() + dateTimePickerRef.value?.open() return } value18.value = [] toast.success('清空成功') }这样可以避免在
dateTimePickerRef.value为undefined时出现的潜在错误。Also applies to: 75-75, 80-81, 176-188
docs/component/calendar-view.md (1)
150-150: 新属性isDot已添加到文档中新属性
isDot的文档说明已正确添加到 Attributes 表格中。描述清晰地解释了该属性的功能。然而，有几点建议：
- 考虑为该属性添加默认值，例如
false。- 可以在文档的其他部分（如"基本使用"或单独的示例）中添加使用
isDot的示例代码，以便更好地说明其用法。- 确保
($LOWEST_VERSION$)占位符被替换为实际的版本号。建议应用以下更改：
-| isDot | boolean | 是否开启红点 | `($LOWEST_VERSION$)` | +| isDot | boolean | 是否开启红点 | false | `($LOWEST_VERSION$)` |另外，请考虑在文档中添加一个使用
isDot的示例，例如：<wd-calendar-view v-model="value" :is-dot="true" @change="handleChange" />这将帮助用户更好地理解如何使用这个新属性。
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue (2)
17-21: 新增的小红点功能实现正确，建议考虑灵活性小红点功能的实现看起来正确且符合需求。使用
<wd-badge>组件来显示小红点是一个好的选择。考虑将
top和right属性设置为可配置的 prop，以增加组件的灵活性：<wd-badge :is-dot="item.isDot" :top="badgeTop" :right="badgeRight"> <view class="wd-month__day-text"> {{ item.text }} </view> </wd-badge>然后在 props 中添加：
badgeTop: { type: Number, default: 6 }, badgeRight: { type: Number, default: 6 }这样可以让使用者根据需要调整小红点的位置。
350-351:isDot属性添加正确，建议添加注释
isDot属性的添加正确实现了小红点功能的控制。建议为
isDot属性添加注释，以提高代码的可读性和可维护性：let dayObj: CalendarDayItem = { date: date, text: day, topInfo: '', bottomInfo: '', type, disabled: compareDate(date, props.minDate) === -1 || compareDate(date, props.maxDate) === 1, isDot: false // 控制是否显示小红点 }这样可以帮助其他开发者更快地理解这个属性的用途。
docs/component/calendar.md (2)
159-160: 新属性isDot的文档已添加新增的
isDot属性文档看起来简洁明了。然而，为了保持文档的一致性和完整性，建议考虑以下几点：
- 添加示例代码，展示如何使用
isDot属性。- 说明该属性的默认值。
- 考虑在组件的 "基本使用" 或 "格式化日期" 部分添加对该属性的引用，以便用户更容易发现和理解这个新功能。
建议按照以下格式补充文档：
| isDot | boolean | 是否显示红点标记 | - | false | `($LOWEST_VERSION$)` | ## 显示红点标记 设置 `isDot` 属性为 `true`，可以在日期上显示红点标记。 ```html <wd-calendar v-model="value" :formatter="formatter" />const formatter = (day) => { if (day.date === '2023-05-01') { day.isDot = true } return day }--- Line range hint `1-560`: **文档整体结构良好，但可以进一步完善** 整体来看，Calendar 组件的文档结构清晰，内容丰富。为了进一步提高文档质量，建议考虑以下几点： 1. 确保所有新增的属性、事件或方法都有相应的示例代码。 2. 检查并统一所有属性、事件和方法的描述格式，确保一致性。 3. 考虑添加一个 "更新日志" 部分，列出组件的版本历史和重要变更。 4. 可以考虑为一些复杂的用例添加在线演示链接，帮助用户更直观地理解组件的使用方法。 建议在文档开头添加一个简短的组件描述和功能列表，以便用户快速了解组件的核心特性。例如： ```markdown # Calendar 日历选择器 Calendar 组件提供了灵活的日期选择功能，支持单选、多选、范围选择等多种模式。 ## 功能特性 - 支持日期、周、月的选择 - 支持范围选择 - 自定义日期格式化 - 快捷选项配置 - 自定义主题样式src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1)
41-43: 新增的 right-icon 插槽提高了组件的灵活性这个改动很好地增强了组件的可定制性。通过添加
right-icon插槽，用户现在可以根据需要自定义右侧图标，同时保持了原有的默认行为。建议：
- 考虑为插槽添加一个简短的注释，说明其用途和预期的使用方式。
- 可以在组件的文档中添加这个新插槽的使用示例，以帮助用户理解如何利用这个新功能。
考虑添加如下注释：
+<!-- 自定义右侧图标 --> <slot name="right-icon" :disabled="disabled" :readonly="readonly"> <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" /> </slot>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (12)
- docs/component/calendar-view.md (1 hunks)
- docs/component/calendar.md (1 hunks)
- docs/component/datetime-picker.md (2 hunks)
- src/pages/calendarView/Index.vue (3 hunks)
- src/pages/datetimePicker/Index.vue (4 hunks)
- src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-pagination/index.scss (2 hunks)
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-pagination/index.scss (1)
36-36: 活动状态样式变更可能影响可见性将活动状态的样式从特定颜色更改为不透明度值可能会影响组件的视觉层次结构。
请确认这个变更是否符合设计规范，并且在各种背景颜色下都能保持足够的对比度。您可以考虑使用 Web 内容无障碍指南（WCAG）的对比度检查工具来验证可访问性。
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss (1)
126-128: 请提供红点功能的完整实现细节当前的更改只添加了
.wd-badge的基本显示属性，这可能不足以完全实现 PR 目标中描述的红点功能。为了全面理解此功能的实现：
- 是否有其他文件（如 JavaScript 或 模板文件）也进行了相关更改？
- 如何控制红点的显示和隐藏？
- 是否有相关的文档或使用示例来说明此新功能？
为了验证完整的实现，请运行以下脚本：
这将帮助我们找到可能与此功能相关的其他文件和文档。
src/pages/calendarView/Index.vue (1)
85-86: 当前日期标记的实现看起来不错为当前日期添加
topInfo和isDot标记是一个很好的改进。这样可以在日历中清晰地突出显示今天的日期，提高了用户体验。实现逻辑看起来正确，符合 PR 的目标。好的工作！
src/pages/datetimePicker/Index.vue (1)
36-44: 总结：新增的自定义图标功能增强了日期时间选择器的灵活性和用户体验这次更改成功地为日期时间选择器组件添加了自定义图标功能。主要亮点包括：
- 使用插槽实现灵活的图标定制。
- 根据选择器状态动态切换图标。
- 实现了清空选择的功能。
- 代码结构清晰，遵循 Vue 3 最佳实践。
这些改进显著增强了组件的灵活性和用户体验。建议在合并之前，考虑实施之前提到的小改进，以进一步提高可访问性和类型安全性。
Also applies to: 53-54, 75-75, 80-81, 176-188
docs/component/datetime-picker.md (1)
Line range hint
258-365: 文档更新总体评价整体而言，此次文档更新质量良好，主要亮点如下：
- 新增的自定义图标功能描述清晰，并提供了详细的代码示例。
- Slot 表格已更新，包含了新增的
right-icon插槽信息。- 文档结构保持一致，新内容与现有内容融合得当。
建议在修复之前提到的小问题后合并这些更改。这将为用户提供清晰、准确的新功能使用指南。
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue (1)
Line range hint
1-365: 总体评价：小红点功能实现完善，符合需求此PR成功实现了日历组件的小红点新功能。代码变更符合预期，实现了以下目标：
- 在模板中添加了
<wd-badge>组件来显示小红点。- 在
getFormatterDate函数中添加了isDot属性来控制小红点的显示。这些变更正确地实现了需求，代码质量良好。我提出了一些小的改进建议，主要涉及增加灵活性和改善文档，但这些并不影响功能的正确性。
建议在合并此PR之前，考虑实施之前提到的改进建议，以进一步提高代码的可维护性和灵活性。
| // color: rgba(0,0,0,0.15) | ||
| opacity:0.985; |
There was a problem hiding this comment.
禁用状态的不透明度显著提高
将禁用状态的样式从 rgba(0,0,0,0.15) 更改为不透明度 0.985 会使禁用的元素变得更加可见。
这可能会导致用户混淆禁用和启用的状态。建议重新考虑这个改动，可能的解决方案包括：
- 使用较低的不透明度值，如 0.5 或 0.6。
- 保留原来的 rgba 颜色值，因为它提供了更明确的视觉区分。
- 如果确实需要更高的不透明度，考虑添加其他视觉提示（如删除线）来表示禁用状态。
请与设计团队讨论，确保这个改动符合整体的设计语言和可用性要求。
| .wd-badge{ | ||
| display: block; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议完善红点样式定义
新增的 .wd-badge 类只设置了 display: block，这可能不足以实现预期的红点效果。建议考虑以下几点：
- 为红点添加具体的样式，如大小、颜色、形状等。
- 指定红点在日期单元格中的位置。
- 确保红点的颜色符合设计要求（当前未指定为红色）。
考虑添加以下样式来完善红点效果：
.wd-badge{
display: block;
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: red;
}这将创建一个小型的红色圆点，位于日期单元格的右上角。请根据实际设计需求调整具体的尺寸和位置。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .wd-badge{ | |
| display: block; | |
| } | |
| .wd-badge{ | |
| display: block; | |
| position: absolute; | |
| top: 4px; | |
| right: 4px; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: red; | |
| } |
| <wd-calendar-view type="weekrange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view> | ||
| <wd-calendar-view type="monthrange" allow-same-day v-model="value6" :formatter="formatter"></wd-calendar-view> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议为每个日历组件使用独立的 v-model 绑定
目前，周范围和月范围选择器使用相同的 v-model 绑定（value6）。这可能会导致意外的行为，因为两个组件可能会相互影响。
建议修改如下：
<wd-calendar-view type="weekrange" allow-same-day v-model="weekRangeValue" :formatter="formatter"></wd-calendar-view>
<wd-calendar-view type="monthrange" allow-same-day v-model="monthRangeValue" :formatter="formatter"></wd-calendar-view>同时，在 <script> 部分定义新的响应式变量：
const weekRangeValue = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])
const monthRangeValue = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])这样可以确保两个日历组件的选择互不影响。
| day.topInfo = '618大促' | ||
| day.isDot = true |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用更灵活的方式标记特殊日期
当前的实现直接在代码中硬编码了特定的促销日期（6月18日）。虽然这种方法可行，但可能不够灵活，特别是当需要频繁更新或添加新的特殊日期时。
建议考虑以下改进：
- 创建一个特殊日期的配置数组或对象，可以更容易地管理和更新。
- 使用一个函数来检查日期是否为特殊日期，而不是直接在 formatter 中进行判断。
例如：
const specialDates = [
{ month: 5, day: 18, info: '618大促' },
{ month: 10, day: 11, info: '京东双11' }
// 可以轻松添加更多特殊日期
]
function isSpecialDate(date: Date) {
return specialDates.find(sd => sd.month === date.getMonth() && sd.day === date.getDate())
}
// 在 formatter 中使用
if (const specialDate = isSpecialDate(date)) {
day.topInfo = specialDate.info
day.isDot = true
}这种方法更容易维护和扩展，特别是当有多个特殊日期需要标记时。
| @@ -328,6 +362,7 @@ const displayFormatTabLabel = (items) => { | |||
| |------|-----|---------| | |||
| | default | 使用默认插槽 | - | | |||
| | label | 左侧标题插槽 | - | | |||
| | right-icon | 右侧图标插槽,作用域参数：{ disabled, readonly } | $LOWEST_VERSION$ | | |||
There was a problem hiding this comment.
Slot 表格更新
新增的 right-icon 插槽已正确添加到 Slot 表格中。但是有一个小问题需要注意：
$LOWEST_VERSION$ 占位符没有被实际的版本号替换。建议将其替换为实际的最低支持版本号，例如 "1.0.0" 或当前组件库的版本号。
-| right-icon | 右侧图标插槽,作用域参数：{ disabled, readonly } | $LOWEST_VERSION$ |
+| right-icon | 右侧图标插槽,作用域参数：{ disabled, readonly } | 1.0.0 |Committable suggestion was skipped due to low confidence.
| ## 自定义icon | ||
|
|
||
| 添加 `right-icon` 插槽来自定义右侧图标。 | ||
|
|
||
|
|
||
| ```html | ||
| <wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef"> | ||
| <template #right-icon="{ disabled, readonly }"> | ||
| <view @click.stop="rightIconClick" v-if="!disabled && !readonly"> | ||
| <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" /> | ||
| </view> | ||
| </template> | ||
| </wd-datetime-picker> | ||
| ``` | ||
|
|
||
| ```typescript | ||
| import type {, | ||
| DatetimePickerExpose | ||
| } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types' | ||
|
|
||
| const value = ref<any[]>(['', Date.now()]) | ||
| const dateTimePickerRef=ref<DatetimePickerExpose>(null) | ||
|
|
||
| /* right-icon点击事件 */ | ||
| function rightIconClick() { | ||
| if (isEmpty.value) { | ||
| dateTimePickerRef.value!.open() | ||
| return | ||
| } | ||
| value.value = [] | ||
| } | ||
| ``` | ||
|
|
||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
新增自定义图标功能的文档说明
这个新增的部分很好地介绍了自定义图标的功能。但是有一些地方可以改进：
- 示例代码中使用了
view标签，这在 uni-app 中不是标准用法。建议改为view或div。 - 示例代码中的
isEmpty变量没有在 TypeScript 代码中定义。 - 可以添加一些注释来解释
right-icon插槽的作用域参数{ disabled, readonly }的用途。
建议进行以下修改：
- 将 HTML 示例中的
view改为view。 - 在 TypeScript 代码中添加
isEmpty的定义。 - 为
right-icon插槽的作用域参数添加注释说明。
<wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef">
<template #right-icon="{ disabled, readonly }">
- <view @click.stop="rightIconClick" v-if="!disabled && !readonly">
+ <view @click.stop="rightIconClick" v-if="!disabled && !readonly">
<wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" />
</view>
</template>
</wd-datetime-picker>
// TypeScript 代码
import type {,
DatetimePickerExpose
} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
const value = ref<any[]>(['', Date.now()])
const dateTimePickerRef=ref<DatetimePickerExpose>(null)
+const isEmpty = computed(() => value.value.length === 0 || value.value.every(v => !v))
/* right-icon点击事件 */
function rightIconClick() {
if (isEmpty.value) {
dateTimePickerRef.value!.open()
return
}
value.value = []
}
+// 注释说明
+// right-icon 插槽的作用域参数：
+// disabled: 是否禁用
+// readonly: 是否只读📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 自定义icon | |
| 添加 `right-icon` 插槽来自定义右侧图标。 | |
| ```html | |
| <wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef"> | |
| <template #right-icon="{ disabled, readonly }"> | |
| <view @click.stop="rightIconClick" v-if="!disabled && !readonly"> | |
| <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" /> | |
| </view> | |
| </template> | |
| </wd-datetime-picker> | |
| ``` | |
| ```typescript | |
| import type {, | |
| DatetimePickerExpose | |
| } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types' | |
| const value = ref<any[]>(['', Date.now()]) | |
| const dateTimePickerRef=ref<DatetimePickerExpose>(null) | |
| /* right-icon点击事件 */ | |
| function rightIconClick() { | |
| if (isEmpty.value) { | |
| dateTimePickerRef.value!.open() | |
| return | |
| } | |
| value.value = [] | |
| } | |
| ``` | |
| ## 自定义icon | |
| 添加 `right-icon` 插槽来自定义右侧图标。 | |
| ```html | |
| <wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef"> | |
| <template #right-icon="{ disabled, readonly }"> | |
| <view @click.stop="rightIconClick" v-if="!disabled && !readonly"> | |
| <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" /> | |
| </view> | |
| </template> | |
| </wd-datetime-picker> | |
| ``` | |
| ```typescript | |
| import type {, | |
| DatetimePickerExpose | |
| } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types' | |
| const value = ref<any[]>(['', Date.now()]) | |
| const dateTimePickerRef=ref<DatetimePickerExpose>(null) | |
| const isEmpty = computed(() => value.value.length === 0 || value.value.every(v => !v)) | |
| /* right-icon点击事件 */ | |
| function rightIconClick() { | |
| if (isEmpty.value) { | |
| dateTimePickerRef.value!.open() | |
| return | |
| } | |
| value.value = [] | |
| } | |
| // 注释说明 | |
| // right-icon 插槽的作用域参数： | |
| // disabled: 是否禁用 | |
| // readonly: 是否只读 | |
| ``` | |
|
可以新增自定义文字吗？ |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
isDot属性，允许用户启用或禁用红点指示器。right-icon插槽，支持自定义右侧图标。改进
isDot属性的徽章指示器。样式