feat: ✨ radio添加iconPlacement属性用于控制图标方向#763
Merged
Moonofweisheng merged 2 commits intoMoonofweisheng:masterfrom Dec 7, 2024
Merged
feat: ✨ radio添加iconPlacement属性用于控制图标方向#763Moonofweisheng merged 2 commits intoMoonofweisheng:masterfrom
Moonofweisheng merged 2 commits intoMoonofweisheng:masterfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更主要针对 Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
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: 1
🧹 Outside diff range and nitpick comments (8)
src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts (1)
2-2: 代码变更合理，建议补充注释说明代码结构清晰，类型定义准确。建议为
RadioIconPlacement类型添加详细的 JSDoc 注释，说明每个可选值的具体用途。import type { RadioShape, RadioIconPlacement } from '../wd-radio/types' + +/** + * 图标位置类型 + * @property {'left'} - 图标位于文本左侧 + * @property {'right'} - 图标位于文本右侧 + * @property {'auto'} - 自动判断图标位置 + */Also applies to: 14-14, 37-38
src/uni_modules/wot-design-uni/components/wd-radio/types.ts (1)
15-16: 类型定义完善，建议优化类型注释类型定义和属性配置合理。建议：
- 为
RadioIconPlacement类型添加详细的类型注释- 在
iconPlacement属性注释中说明null值的作用（继承父组件配置）+/** + * 单选框图标位置 + * @description 控制单选框中图标相对于文本的位置 + */ export type RadioIconPlacement = 'left' | 'right' | 'auto' /** 图标位置，默认为 left */ + /** + * 图标位置 + * @description 控制图标相对于文本的位置 + * @default null - 继承父组件 RadioGroup 的配置 + */ iconPlacement: { type: [String, null] as PropType<RadioIconPlacement>, default: null }Also applies to: 44-48
src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue (2)
7-7: 模板绑定方式需要优化当前的模板字符串拼接方式可能导致类名出现空格问题。建议使用数组方式处理类名绑定。
- } icon-placement-${iconPlacement} ${customClass}`" + } icon-placement-${iconPlacement}`, customClass]"
90-96: 计算属性实现合理，建议添加单元测试计算属性
iconPlacement的实现遵循了组件内其他继承属性的模式，逻辑正确。建议：
- 添加对应的单元测试用例，验证属性继承逻辑
- 测试不同的父组件配置场景
需要我帮您生成对应的单元测试代码吗？
docs/component/radio.md (2)
152-162: 建议完善文档的一致性建议对文档做如下改进：
- 为新增的
icon-placement属性添加使用示例- 补充属性的默认值对组件行为的影响说明
166-168: 建议补充事件参数说明
change事件的参数说明过于简略，建议详细说明value的类型和可能的值。src/uni_modules/wot-design-uni/components/wd-radio/index.scss (2)
175-177: 建议考虑 RTL 布局支持当前的图标位置切换实现使用了
flex-direction: row-reverse，这可能会影响 RTL（从右到左）布局的正确性。建议考虑使用更灵活的实现方式。建议参考以下实现方式：
.icon-placement-left { - flex-direction: row-reverse; + .wd-radio__shape { + order: -1; + margin-right: 4px; + margin-left: 0; + } }
209-215: 建议优化内联模式下的图标位置样式当前实现在内联模式下使用了
float布局，这可能会导致一些布局问题。建议统一使用 flex 布局来处理图标位置。建议参考以下实现：
&.icon-placement-right { .wd-radio__shape { - margin-right: 0; - margin-left: 4px; - float: right; + order: 1; + margin-left: 4px; + margin-right: 0; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
docs/component/radio.md(1 hunks)src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-radio/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-radio/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue(3 hunks)
Comment on lines
+172
to
+177
| | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ||
| | ------------- | --------------------------------------------- | ------------------------- | -------------------- | ------- | -------- | | ||
| | value | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | - | - | - | | ||
| | shape | 单选框形状 | string | dot / button / check | check | - | | ||
| | checked-color | 选中的颜色 | string | - | #4D80F0 | - | | ||
| | disabled | 禁用 | boolean | - | false | - | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议补充 Radio 组件的 icon-placement 属性说明
为保持与 RadioGroup 的一致性，建议在 Radio 属性表中也添加 icon-placement 属性的说明，并说明其优先级。
19 tasks
|
牛哇牛哇！ |
19 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
close #371
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
wd-radio组件文档，新增icon-placement属性，支持图标位置的自定义（左、右、自动）。checked-color属性，允许自定义选中颜色。disabled属性，支持禁用单个或整个radio-group。样式
.icon-placement-left和.icon-placement-right类，以支持图标位置的样式调整。