fix: 🐛 修复 Divider 分割线组件 CustomClass 未生效的问题#790
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练此次更改主要涉及分隔线（Divider）组件的类型定义和实现。在 变更
针对链接问题的评估
诗歌
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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: 0
🧹 Nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (2)
26-31: 样式处理逻辑优化使用
CSSProperties类型和objToStyle工具函数重构了样式处理逻辑，使代码更加类型安全和可维护。建议考虑以下改进：const rootStyle = computed(() => { const { color } = props const style: CSSProperties = {} if (color) { - style.color = color + style.borderColor = color } return `${objToStyle(style)};${props.customStyle}` })
41-43: 建议优化条件判断的可读性当前的条件判断逻辑有些重复，建议提取共同条件：
- [`${prefixCls}--center`]: !props.vertical && !!slots.default, - [`${prefixCls}--left`]: !props.vertical && props.contentPosition === 'left', - [`${prefixCls}--right`]: !props.vertical && props.contentPosition === 'right', + const isHorizontal = !props.vertical; + [`${prefixCls}--center`]: isHorizontal && !!slots.default, + [`${prefixCls}--left`]: isHorizontal && props.contentPosition === 'left', + [`${prefixCls}--right`]: isHorizontal && props.contentPosition === 'right',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/uni_modules/wot-design-uni/components/wd-divider/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue(1 hunks)
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-divider/types.ts (1)
12-12: 类型定义的改进看起来不错！
将 color 属性的类型从 makeStringProp('') 简化为 String 是一个合理的改动，使类型定义更加直观。
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (3)
18-20: 导入声明更加完整和规范
添加了 CSSProperties 类型和 objToStyle 工具函数的导入，增强了类型安全性和样式处理能力。
36-46: 类名处理逻辑优化，修复了 CustomClass 问题
重构后的代码：
- 使用对象统一管理类名，提高了代码可读性
- 正确处理了
customClass的应用，解决了原有问题 - 条件判断更加清晰
这个改动很好地解决了 PR 的主要目标：修复 CustomClass 未生效的问题。
44-44: 验证 CustomClass 修复
请验证 CustomClass 在以下场景中是否正常工作：
✅ Verification successful
CustomClass 属性验证已完成
根据代码检查结果，CustomClass 的实现是正确的：
- 在组件的计算属性
rootClass中正确处理了customClass属性：[props.customClass]: !!props.customClass - 组件文档中已列出
custom-class作为外部样式类 - 组件模板中通过
:class="rootClass"正确应用了样式类
自定义样式类功能已正确实现，可以放心使用。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索 wd-divider 组件的使用示例
rg -l "wd-divider.*customClass"
# 检查测试用例
rg -l "customClass.*wd-divider" -g "*test*"
Length of output: 228
Script:
#!/bin/bash
# 搜索组件文档和示例
fd -e md -e vue | xargs rg -l "customClass.*wd-divider|wd-divider.*customClass"
# 检查组件定义中的 customClass 实现
ast-grep --pattern 'props: {
$$$
customClass: {
$$$
}
$$$
}' src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
# 检查组件模板中的 customClass 使用
ast-grep --pattern '<template>
$$$
class="$$$"
$$$
</template>' src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
Length of output: 364
Script:
#!/bin/bash
# 检查组件文件内容
cat src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
# 搜索示例文档
fd "divider" -e md | xargs cat
# 搜索组件测试文件
fd "divider.*test" | xargs cat
Length of output: 3520
1 participant
✅ Closes: #789
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#789
💡 需求背景和解决方案
为divider添加custom-class
☑️ 请求合并前的自查清单
Summary by CodeRabbit