$ cnpm install @uyun/ec-layer-form
层级表单
用户通过自定义条件、指定触发规则和动作后,通过系统判断,由系统自动执行任务
条件和动作一定是同时对应存在的
一个触发事件可同时被多个触发规则引用,且一个触发规则可同时引用多个触发事件;
触发事件除了可被触发规则所引用,也可以在其他自动化执行的产品里被重复引用;
基于原子思维拆解(解耦),支持组件的灵活性配置和元素组合
该组件是受控组件,暂不支持非受控模式 属性说明如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 表单数值 | LayerFormValue | - |
className | 样式 | string | - |
title | 标题 | ReactNode or (LayerFormValue) => React.ReactNode |
- |
extra | 右上角的操作区域 | ReactNode or (LayerFormValue) => React.ReactNode |
- |
renderItem | 列表渲染方法 | (item:LayerFormValueItem, index:number, LayerFormValue) => React.ReactNode | - |
onRemove | 删除回调方法 | (value:LayerFormValue, type:'data/children', index:number) => void | - |
fieldNames | 自定义 value 中的数据结构 | DefaultFieldNames | {data: 'data', children: 'children' } |
type DefaultFieldNames = {
data: string
children: string
}
type LayerFormValueItem = Record<any, any>
interface LayerFormValue {
id: string
data: LayerFormValueItem[]
children?: LayerFormValue[]
}
<style>
[id^="components-layer-form-demo-"] .uyun-btn + .uyun-btn {
margin-left: 8px;
}
.mrxs {
margin-right: 8px;
}
</style>
Copyright 2013 - present © cnpmjs.org