feat: ✨ form 表单禁用功能 #629
feat: ✨ form 表单禁用功能 #629
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改涉及对表单组件的修改，主要是引入了 Changes
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: 1
Outside diff range and nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-form/types.ts (1)
66-70: 代码变更看起来不错，建议稍微调整注释措辞。新增的
disabled属性实现符合预期，使用了makeBooleanProp(false)来定义，与文件中其他布尔属性的定义方式一致。这个改动很好地实现了 PR 中描述的表单禁用功能。建议稍微调整注释的措辞，使其更加准确和简洁。可以考虑如下修改：
/** - * 表单整体禁用，开启之后，里面的表单项都会被禁用 + * 禁用整个表单，启用后所有表单项将被禁用 */这样的表述更加直接和清晰，同时保持了注释的简洁性。
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/pages/form/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/composables/useChildren.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-form/types.ts (1 hunks)
Additional comments not posted (1)
src/pages/form/Index.vue (1)
4-4: 已添加禁用功能，请验证并考虑用户体验这个更改符合PR的目标，为表单添加了禁用功能。很好的实现！
建议：
- 请验证
disabled状态是否正确传播到所有子组件（输入框和按钮）。- 考虑为禁用状态添加视觉反馈，以便用户理解表单当前不可交互。
- 建议添加注释说明为什么默认禁用此表单，或考虑是否应该默认启用。
可以运行以下脚本来验证
disabled属性在其他表单组件中的使用情况：考虑添加一个计算属性或方法来动态控制表单的禁用状态，而不是硬编码。例如：
<wd-form ref="form1" :model="model1" :disabled="isFormDisabled"> <!-- 表单内容 --> </wd-form> <script setup> const isFormDisabled = ref(true) // 或者使用计算属性 function toggleFormDisabled() { isFormDisabled.value = !isFormDisabled.value } </script>这样可以更灵活地控制表单的禁用状态。
Verification successful
禁用功能已正确实现，无其他问题
经过验证，
src/pages/form/Index.vue中的wd-form组件成功添加了disabled属性，并且未在其他组件中发现相关问题。该更改符合预期，已通过审核。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：检查其他表单组件是否正确使用了 disabled 属性 # 测试：搜索其他使用 wd-form 的文件，检查是否正确处理了 disabled 状态 rg --type vue 'wd-form' -A 10 | grep -v 'src/pages/form/Index.vue'Length of output: 92
Script:
#!/bin/bash # 描述：检查其他表单组件是否正确使用了 disabled 属性 # 使用 --glob 指定搜索 .vue 文件，避免文件类型未定义的问题 rg 'wd-form' --glob '*.vue' -A 10 | grep -v 'src/pages/form/Index.vue'Length of output: 22771
| if ((value as any).props?.disabled) { | ||
| child.props.disabled = true | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
请考虑改进禁用逻辑的实现
这个更改的意图是确保当父组件被禁用时，其子组件也会被禁用，这是一个好的做法。然而，当前的实现可能存在一些潜在问题：
- 它假设所有子组件都有
disabled属性，这可能并不总是成立。 - 直接修改子组件的 props 可能会导致意外行为。
建议考虑以下改进：
-
在修改子组件的
disabled属性之前，先检查该属性是否存在：if ((value as any).props?.disabled && 'disabled' in child.props) { child.props.disabled = true }
-
考虑使用一个单独的属性（如
parentDisabled）来表示父组件的禁用状态，而不是直接覆盖子组件的disabled属性：if ((value as any).props?.disabled) { child.props.parentDisabled = true }
-
在文档中明确说明这种行为，以便其他开发者了解这种级联禁用的机制。
-
考虑添加一个选项，允许开发者控制是否启用这种级联禁用行为。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
表单禁用功能
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档