Skip to content

表单设计最佳实践

YH-UI 的表单组件,尤其是 FormSchema,适合用于需要统一字段定义、校验规则和渲染逻辑的 schema 驱动表单场景。

为什么选择 YH-UI 表单?

1. 逻辑高度聚合

在传统开发模式中,表单的布局、数据联动、校验逻辑往往分散在 templatescript 和冗长的 watch 中。YH-UI 通过 FormSchema 将这些逻辑统一收敛到一份 JSON 配置中:

  • 声明式联动:通过 propshidden 函数直接根据当前模型状态计算 UI 表现。
  • 内聚布局:Schema 支持基于列的布局配置,便于将相关表单结构集中维护。

2. 极致的类型安全 (DX)

表单相关包同时暴露了实例类型,便于在业务中直接使用:

  • 精确推断:导出的 FormSchemaInstance 提供了完整的 API 补全。
  • 公开实例类型:可以从公开导出中引入 FormSchemaInstanceFormInstance

3. 表单实力的安全性

  • 校验 API:schema/form 实例都暴露了 validateresetFieldsclearValidatescrollToField
  • 模型访问FormSchemaInstance 还暴露了 getModelsetFieldValueformRef

高级应用示例

这个示例展示了 YH-UI 表单引擎处理复杂逻辑的能力:动态分组、多级联动、异步验证、自定义渲染、以及完善的类型安全。

企业基本信息
联系人信息
认证协议
企业级入驻表单

Released under the MIT License.