@aligov/common-form-drawer

intro component

Usage no npm install needed!

<script type="module">
  import aligovCommonFormDrawer from 'https://cdn.skypack.dev/@aligov/common-form-drawer';
</script>

README

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);