❤
npm
Sign UpSign In

uform

0.1.9 • Public • Published

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

Copyright (c) 2019 笪笪的前端小站

Readme

Keywords

Package Sidebar

Install

npm i uform

Weekly Downloads

0

Version

0.1.9

License

ISC

Unpacked Size

1.63 MB

Total Files

18

Last publish

Collaborators

  • dadaiwei
Try on RunKit
Report malware