feat: ✨ datetime-picker新增right-icon插槽 #633
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改为 Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (2)
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: 2
🧹 Outside diff range and nitpick comments (3)
src/pages/datetimePicker/Index.vue (1)
36-44: 自定义图标功能实现正确，建议小幅改进。新增的自定义图标功能实现得很好，符合PR的目标。条件渲染和事件处理的方式都很合适。
为了提高可访问性，建议在图标上添加
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 ? '打开日期选择器' : '清除选择'" />这样可以为使用屏幕阅读器的用户提供更好的体验。
docs/component/datetime-picker.md (1)
263-289: 代码示例整体不错，但有几处可以改进：
- HTML 示例中，
view标签应该改为view，以符合小程序的标准。- TypeScript 示例中，
isEmpty变量没有定义，需要添加其定义和用途说明。- 考虑添加注释来解释
rightIconClick函数的逻辑，特别是为什么在isEmpty时打开选择器，而在非空时清除值。建议进行如下修改：
- 将 HTML 中的
view改为view。- 在 TypeScript 代码中添加
isEmpty的定义，例如：const isEmpty = computed(() => !value.value || value.value.length === 0)- 为
rightIconClick函数添加注释：/* right-icon点击事件 */ function rightIconClick() { // 如果当前值为空，则打开日期时间选择器 if (isEmpty.value) { dateTimePickerRef.value!.open() return } // 如果当前值不为空，则清空选择 value.value = [] }这些改进将使示例代码更加完整和易于理解。
src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1)
41-43: 新增的 right-icon 插槽实现良好，但可以稍作改进这个新增的插槽为 datetime-picker 组件提供了更好的自定义性，允许用户根据需要替换默认的右侧图标。实现方式保持了向后兼容性，同时确保了在禁用或只读状态下不显示图标。
为了提高代码的可读性和可维护性，建议将条件判断提取为一个计算属性。例如：
+const showRightIcon = computed(() => !disabled && !readonly) <template> ... - <slot name="right-icon" :disabled="disabled" :readonly="readonly"> - <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" /> + <slot name="right-icon" :show="showRightIcon"> + <wd-icon v-if="showRightIcon" custom-class="wd-picker__arrow" name="arrow-right" /> </slot> ... </template>这样可以使模板更加清晰，并且将逻辑集中到一处，便于future维护。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- docs/component/datetime-picker.md (2 hunks)
- src/pages/datetimePicker/Index.vue (4 hunks)
- src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue (1 hunks)
🔇 Additional comments not posted (3)
src/pages/datetimePicker/Index.vue (1)
75-75: 自定义图标功能的数据和计算属性实现正确。新增的
value18响应式引用、dateTimePickerRef引用和isEmpty计算属性都实现得很好，为自定义图标功能提供了必要的数据支持。Also applies to: 80-80, 177-179
docs/component/datetime-picker.md (2)
258-261: 新增的自定义图标功能说明清晰明了。这个新增的部分很好地解释了如何使用新的
right-icon插槽来自定义右侧图标。文档的这个添加对用户理解和使用新功能很有帮助。
Line range hint
258-365: 总体评价：文档更新质量良好，新功能说明清晰此次更新很好地介绍了 DatetimePicker 组件的新功能 —— 自定义右侧图标。文档结构清晰，包含了使用示例和必要的 API 更新。我们提出的小改进主要集中在代码示例的完整性和 Slot 表格的细节上。实施这些建议将进一步提高文档的质量和用户友好性。
总的来说，这是一个很好的功能添加和文档更新。在解决了提到的小问题后，这个更新将为用户提供清晰和全面的指导，以充分利用新的
right-icon插槽功能。
| function rightIconClick() { | ||
| if (isEmpty.value) { | ||
| dateTimePickerRef.value!.open() | ||
| return | ||
| } | ||
| value18.value = [] | ||
| toast.success('清空成功') | ||
| } |
There was a problem hiding this comment.
建议改进 rightIconClick 函数中的空值处理。
rightIconClick 函数的实现逻辑正确，但在访问 dateTimePickerRef.value 时使用了非空断言操作符 (!)，这可能在某些情况下导致运行时错误。
建议使用可选链操作符 (?.) 来安全地访问和调用 open 方法：
function rightIconClick() {
if (isEmpty.value) {
- dateTimePickerRef.value!.open()
+ dateTimePickerRef.value?.open()
return
}
value18.value = []
toast.success('清空成功')
}这样可以避免在 dateTimePickerRef.value 为 null 或 undefined 时抛出错误。
📝 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.
| function rightIconClick() { | |
| if (isEmpty.value) { | |
| dateTimePickerRef.value!.open() | |
| return | |
| } | |
| value18.value = [] | |
| toast.success('清空成功') | |
| } | |
| function rightIconClick() { | |
| if (isEmpty.value) { | |
| dateTimePickerRef.value?.open() | |
| return | |
| } | |
| value18.value = [] | |
| toast.success('清空成功') | |
| } |
docs/component/datetime-picker.md
Outdated
| @@ -328,6 +362,7 @@ const displayFormatTabLabel = (items) => { | |||
| |------|-----|---------| | |||
| | default | 使用默认插槽 | - | | |||
| | label | 左侧标题插槽 | - | | |||
| | right-icon | 右侧图标插槽 | $LOWEST_VERSION$ | | |||
There was a problem hiding this comment.
Slot 表格更新正确，但版本号需要确定：
- 版本号占位符
$LOWEST_VERSION$需要替换为实际的版本号。 - 考虑为
right-icon插槽添加更多详细信息，例如可用的作用域参数。
建议进行如下修改：
- 将
$LOWEST_VERSION$替换为此功能首次引入的实际版本号。 - 扩展
right-icon插槽的说明，例如：其中| right-icon | 右侧图标插槽。作用域参数：{ disabled, readonly } | x.x.x |
x.x.x为实际版本号。
这些修改将使文档更加准确和有用。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-datetime-picker组件中添加了自定义右侧图标的功能，用户可以通过新的right-icon插槽进行定制。文档
right-icon插槽及其使用示例。样式
wd-pagination组件的样式，更新了活动和禁用状态的颜色属性。