1.0.2-1 • Published 4 years ago
@aligov/common-form-drawer v1.0.2-1
CommonFormDrawer
@aligov/common-form-drawer
intro component
API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|---|
| visible | 是否显示 | true | boolean | false | |
| dialogValue | 表单值 | false | any | ||
| title | 标题 | false | string | 编辑数据 | |
| mode | 模式 | false | number | 0 | 新增：0 编辑：1 详情：2 |
| onOk | 提交函数 | true | Function | 0 | |
| onClose | 关闭函数 | true | Function | 0 | |
| schema | 表单 schema，同 formily | false | any | ||
| submitLabel | 提交按钮文案 | false | string | 保存 | |
| customButtons | 底部按钮 | false | any | null | |
| children | 子元素 | false | any | null | 不用 schema 的话写 Field |
用法
配合@aligov/use-drawer-hook 使用更佳
import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
SchemaMarkupField as Field,
createFormActions,
FormEffectHooks,
} from "@formily/next";
import { Input } from "@formily/next-components";
import CommonFormDrawer from "@aligov/common-form-drawer";
class App extends Component {
render() {
return (
<div>
<CommonFormDrawer
visible={false}
components={{ Input }}
onOk={console.log}
>
<Field
name="name"
title="Field用法"
type="string"
required={true}
x-component="Input"
/>
</CommonFormDrawer>
<CommonFormDrawer
visible
components={{ Input }}
onOk={console.log}
schema={{
type: "object",
"x-component-props": {
labelCol: 7,
wrapperCol: 12,
},
properties: {
string: {
type: "string",
title: "Schema用法",
"x-component": "Input",
},
},
}}
/>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);