feat: ✨ Curtain 幕帘新增 close 插槽和自定义关闭插槽样式类 #746
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要涉及对 Changes
Assessment against linked issues
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!
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 (7)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (1)
53-53: 建议增加样式字符串格式校验为了避免无效的样式字符串导致运行时错误，建议添加样式字符串格式的验证。
- customCloseStyle: makeStringProp('') + customCloseStyle: { + type: String, + default: '', + validator: (value: string) => { + // 验证是否为有效的 CSS 样式字符串 + return /^([\w-]+\s*:\s*[^;]+;\s*)*$/.test(value); + } + }src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (2)
23-30: 插槽实现符合预期，建议补充文档说明新增的关闭按钮插槽实现合理，保持了良好的向后兼容性。默认插槽内容使用
wd-icon组件，并支持自定义样式类和样式。建议在组件文档中补充以下使用示例：
<wd-curtain> <template #close> <view class="custom-close">关闭</view> </template> </wd-curtain>
89-96: 建议优化计算属性的实现方式将
imgStyle改为计算属性是很好的改进，但实现方式可以更优雅。建议使用对象方式返回样式：
-const imgStyle = computed(() => { - let style = '' - if (props.width) { - style += `width: ${props.width}px ;` - style += `height: ${props.width / imgScale.value}px` - } - return style -}) +const imgStyle = computed(() => { + if (!props.width) return {} + return { + width: `${props.width}px`, + height: `${props.width / imgScale.value}px` + } +})src/pages/curtain/Index.vue (2)
60-60: 建议重构重复的处理函数当前的实现方式虽然可行，但存在大量重复的处理函数模式。建议将这些处理函数统一封装，以提高代码的可维护性。
-const value1 = ref<boolean>(false) -const value2 = ref<boolean>(false) -// ... more value refs +const curtainStates = ref<Record<number, boolean>>({}) + +function handleClick(index: number) { + curtainStates.value[index] = true +} + +function handleClose(index: number) { + curtainStates.value[index] = false +}Also applies to: 113-118
129-135: 建议优化关闭按钮的可点击区域为了提升移动端的用户体验，建议：
- 增加按钮的可点击区域
- 添加触摸反馈效果
.custom-close { position: absolute; top: 10px; right: 10px; color: #ffffff; font-size: 32rpx; + padding: 20rpx; + cursor: pointer; + &:active { + opacity: 0.8; + } }docs/component/curtain.md (2)
Line range hint
20-30: 建议优化重复的代码示例代码示例在多个部分中完全重复。建议考虑以下改进方案：
- 在文档开始处提供一个完整的代码示例
- 在后续部分中仅展示与该特定功能相关的代码差异部分
Also applies to: 43-53, 66-76, 89-99
Line range hint
1-144: 建议添加关闭按钮插槽的使用示例文档中缺少如何使用自定义关闭按钮插槽的示例代码。建议添加一个新的示例部分，展示：
- 如何使用
close插槽- 如何应用
custom-close-class和custom-close-style示例代码参考：
<wd-button @click="handleClick">展示自定义关闭按钮的幕帘</wd-button> <wd-curtain :value="value" :src="img" @close="handleClose" custom-close-class="my-close-class" custom-close-style="color: red;" > <template #close> <view class="custom-close">关闭</view> </template> </wd-curtain>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
docs/component/curtain.md(5 hunks)src/pages/curtain/Index.vue(5 hunks)src/uni_modules/wot-design-uni/components/wd-curtain/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue(3 hunks)
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (1)
41-53: 新属性实现完善且符合需求
新增的 customCloseClass 和 customCloseStyle 属性实现规范，类型定义清晰，文档注释完整。这些属性很好地满足了自定义关闭按钮样式的需求。
src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (2)
50-50: 导入声明更新合理
从 Vue 中导入 computed 用于优化响应式属性的实现是一个很好的改进。
76-81: watch 逻辑简化提升了代码可读性
watch 逻辑的改进很好地处理了图片加载状态和显示逻辑的关系。
src/pages/curtain/Index.vue (1)
22-24: 代码结构清晰，实现符合需求！
新增的自定义关闭按钮示例完全符合需求，代码组织良好，slot 的使用也符合 Vue 的最佳实践。
Also applies to: 42-46
docs/component/curtain.md (2)
105-114: 属性表格内容完整且清晰
属性表格结构合理，包含了所有必要的字段说明。
118-131: 事件表格内容准确完整
事件表格包含了完整的事件列表，描述清晰准确。
| ## Slots | ||
|
|
||
| | name | 说明 | 最低版本 | | ||
| | ----- | ------------ | ---------------- | | ||
| | close | 关闭按钮插槽 | $LOWEST_VERSION$ | |
There was a problem hiding this comment.
需要更新版本号占位符
插槽表格中的 $LOWEST_VERSION$ 需要替换为实际的版本号。
| | 类名 | 说明 | 最低版本 | | ||
| | ------------------ | -------------- | ---------------- | | ||
| | custom-class | 根节点样式 | - | | ||
| | custom-close-class | 关闭按钮样式类 | $LOWEST_VERSION$ | | ||
| | custom-close-style | 关闭按钮样式 | $LOWEST_VERSION$ | |
There was a problem hiding this comment.
样式类定义完整，但需要更新版本号
外部样式类的添加符合需求，支持自定义关闭按钮样式。但是：
custom-close-class的版本号占位符需要替换custom-close-style的版本号占位符需要替换
✅ Closes: #648
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#648
💡 需求背景和解决方案
为
curtain添加close插槽，和自定义样式类，支持自定义关闭按钮。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-curtain组件的文档，增加了 TypeScript 示例代码，提升了使用说明的清晰度和完整性。文档
wd-curtain组件的属性和事件部分的可读性，增加了新的插槽和样式说明。