uform

基于 antd 表单实现的自定义表单，简单实用，支持常用表单及弹窗表单，支持Input、InputNumber、Textarea、Select、Radio、Checkbox、Password、Switch、Rate、custom（自定义ReactNode）。

documentation：https://dadaiwei.github.io/uform
npm：https://www.npmjs.com/package/uform

基本介绍

基于 antd 组件库定制的简单易用 Form，支持通用表单及弹框表单两种形式，支持 Input、InputNumber、Textarea、Select、Radio、Checkbox、Password、Switch、Rate、custom（自定义 ReactNode）。

使用指南

1.安装 UForm 依赖包

npm install uform --save-dev

2.引入依赖包

import UForm from "uform";
import "uform/dist/uform.css";

3.使用 UForm 组件

<UForm
    data={data}
    fields={fields}
    onChange={onChange}
    onCancel={onCancel}
    onSubmit={onSubmit}
    />

代码演示

通用表单

代码

import React, { useState } from "react";
import UForm from "uform";
import "uform/dist/uform.css";

function NormalForm() {
  const [data, setData] = useState({
    name: "",
    size: 1,
    city: 0,
    area: "郊区",
    password: "",
    choosen: true,
    confirm: true,
    rate: 3,
    describe: ""
  });
  const fields = [
    {
      name: "name",
      label: "名称",
      type: "input",
      placeholder: "请输入名称",
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "size",
      label: "大小",
      type: "inputNumber",
      placeholder: "请输入大小",
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "city",
      label: "城市",
      type: "select",
      fieldData: [
        {
          name: "北京",
          value: 0
        },
        {
          name: "上海",
          value: 1
        },
        {
          name: "杭州",
          value: 2
        },
        {
          name: "深圳",
          value: 3
        }
      ],
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "area",
      label: "地区",
      type: "radio",
      fieldData: ["城区", "郊区"]
    },
    {
      name: "confirm",
      label: "确认选择",
      type: "checkbox",
      rules: [
        {
          required: true,
          message: "请确认选择"
        }
      ]
    },
    {
      name: "custom",
      label: "自定义项",
      type: "custom",
      node: (
        <div>
          <h2>自定义表单项</h2>
        </div>
      )
    },
    {
      name: "password",
      label: "密码",
      type: "password",
      rules: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    },
    {
      name: "choosen",
      label: "是否选择",
      type: "switch",
      checkedChildren: "开",
      unCheckedChildren: "关",
      rules: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    },
    {
      name: "rate",
      label: "评分",
      type: "rate"
    },
    {
      name: "describe",
      label: "描述",
      type: "textarea",
      placeholder: "请输入描述"
    }
  ];
  const onChange = (result) => {
    setData({
      ...data,
      ...result
    });
  };
  const onSubmit = (values) => {
    console.log(values);
  };
  const onCancel = () => {
    console.log("cancel");
  };
  return (
    <div>
      <div style={{ width: 600, marginLeft: 100 }}>
        <UForm
          data={data}
          fields={fields}
          onChange={onChange}
          onCancel={onCancel}
          onSubmit={onSubmit}
        />
      </div>
    </div>
  );
}

弹窗表单

代码

import React, { useState } from "react";
import { Button } from "antd";
import UForm from "uform";
import "uform/dist/uform.css";

function ModalForm() {
  const { visible, setVisible } = useState(false);
  const [data, setData] = useState({
    name: "",
    size: 1,
    city: 0,
    area: "郊区",
    password: "",
    choosen: true,
    confirm: true,
    rate: 3,
    describe: ""
  });
  const fields = [
    {
      name: "name",
      label: "名称",
      type: "input",
      placeholder: "请输入名称",
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "size",
      label: "大小",
      type: "inputNumber",
      placeholder: "请输入大小",
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "city",
      label: "城市",
      type: "select",
      fieldData: [
        {
          name: "北京",
          value: 0
        },
        {
          name: "上海",
          value: 1
        },
        {
          name: "杭州",
          value: 2
        },
        {
          name: "深圳",
          value: 3
        }
      ],
      rules: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    },
    {
      name: "area",
      label: "地区",
      type: "radio",
      fieldData: ["城区", "郊区"]
    },
    {
      name: "confirm",
      label: "确认选择",
      type: "checkbox",
      rules: [
        {
          required: true,
          message: "请确认选择"
        }
      ]
    },
    {
      name: "custom",
      label: "自定义项",
      type: "custom",
      node: (
        <div>
          <h2>自定义表单项</h2>
        </div>
      )
    },
    {
      name: "password",
      label: "密码",
      type: "password",
      rules: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    },
    {
      name: "choosen",
      label: "是否选择",
      type: "switch",
      checkedChildren: "开",
      unCheckedChildren: "关",
      rules: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    },
    {
      name: "rate",
      label: "评分",
      type: "rate"
    },
    {
      name: "describe",
      label: "描述",
      type: "textarea",
      placeholder: "请输入描述"
    }
  ];
  const onChange = (result) => {
    setData({
      ...data,
      ...result
    });
  };
  const onSubmit = (values) => {
    console.log(values);
  };
  const onCancel = () => {
    setVisible(false);
  };
  return (
    <div>
      <Button
        type='primary'
        onClick={() => {
          setVisible(true);
        }}>
        打开弹窗表单
      </Button>
      <div style={{ width: 600, marginLeft: 100 }}>
        <UForm
          type="modal"
          visible={visible}
          title='新建表单'
          data={data}
          fields={fields}
          onChange={onChange}
          onCancel={onCancel}
          onSubmit={onSubmit}
        />
      </div>
    </div>
  );
}

API

公共 API

属性	说明	必填属性	类型	可选值	默认值
type	使用通用表单或者弹框表单	false	string	norma \| modal	normal
layout	表单布局	false	string	horizontal \| vertical \| inline	horizontal
labelCol	表单 label 占宽	false	number	1-24 之间整数	4
wrapperCol	表单内容项占宽	false	number	1-24 之间整数，通常为 24-labelCol	16
loading	确定按钮 loading	false	boolean	true \| false	false
data	表单数据	true	any[ ]	-	[ ]
fields	表单每一项特征描述	true	any[ ]	-	[ ]
onSubmit	表单提交回调	true	Function(values)	-	无
onChange	表单每一项修改回调	false	Function(value)	-	无
onCancel	表单取消回调	false	Function( )	-	无

fields props

属性	说明	必填属性	类型	可选值	默认值
name	表单数据 name，与 data 中 key 值一致	true	string	-	无
type	表单项类型	true	string	input \| inputNumber \| textarea \| select \| radio \| checkbox \| password \| switch \| rate \| custom（自定义项）	无
label	表单项 label	true	string	-	无
rules	表单项限制规则，与 antd Form 限制规则一致	false	object [ ]	-	无
fieldData	适用于 type 为 select/radio 的选择项	true	object [ ]	-	无
placehoder	适用于 type 为 input/textarea/select 的提示信息	false	string	-	无
node	适用于 type 为 custom 的自定义 ReactNode	true	ReactNode	-	无

特别说明：type 类型为 select/radio时， fieldsData 是必填属性， type 类型为 custome 时， node 是必填属性。

通用表单特有 API

属性	说明	必填属性	类型	可选值	默认值
showCancelButton	是否展示取消按钮	false	boolean	true \| false	true

弹框表单特有 API

属性	说明	必填属性	类型	可选值	默认值
visible	弹框是否可见	true	boolean	true \| false	true
title	弹框标题	true	string \| ReactNode	-	无
width	弹框宽度	false	number	-	600

License

MIT

Anglay / uform