Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ✨ form 表单禁用功能 #629

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+9 −2
Open

feat: ✨ form 表单禁用功能 #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/form/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<page-wraper>
<demo-block title="基础表单" transparent>
<wd-form ref="form1" :model="model1">
<wd-form ref="form1" :model="model1" disabled>
<wd-cell-group border>
<wd-input
label="用户名"
Expand Down
3 changes: 3 additions & 0 deletions src/uni_modules/wot-design-uni/components/composables/useChildren.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ export function useChildren<
const linkChildren = (value?: ProvideValue) => {
const link = (child: ComponentInternalInstance) => {
if (child.proxy) {
if ((value as any).props?.disabled) {
child.props.disabled = true
}
Comment on lines +83 to +85
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

请考虑改进禁用逻辑的实现

这个更改的意图是确保当父组件被禁用时，其子组件也会被禁用，这是一个好的做法。然而，当前的实现可能存在一些潜在问题：

  1. 它假设所有子组件都有 disabled 属性，这可能并不总是成立。
  2. 直接修改子组件的 props 可能会导致意外行为。

建议考虑以下改进：

  1. 在修改子组件的 disabled 属性之前，先检查该属性是否存在：

    if ((value as any).props?.disabled && 'disabled' in child.props) {
  child.props.disabled = true
}

  2. 考虑使用一个单独的属性（如 parentDisabled）来表示父组件的禁用状态，而不是直接覆盖子组件的 disabled 属性：

    if ((value as any).props?.disabled) {
  child.props.parentDisabled = true
}

  3. 在文档中明确说明这种行为，以便其他开发者了解这种级联禁用的机制。

  4. 考虑添加一个选项，允许开发者控制是否启用这种级联禁用行为。

internalChildren.push(child)
publicChildren.push(child.proxy as Child)
sortChildren(parent, publicChildren, internalChildren)
Expand Down
6 changes: 5 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-form/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ export const formProps = {
errorType: {
type: String as PropType<'toast' | 'message' | 'none'>,
default: 'message'
}
},
/**
* 表单整体禁用，开启之后，里面的表单项都会被禁用
*/
disabled: makeBooleanProp(false)
}
export type FormProps = ExtractPropTypes<typeof formProps>

Expand Down