0.0.5 • Published 2 years ago
topkee-mui-form v0.0.5
基于mui实现Form表单组件包
安装
npm i topkee-mui-form
引用
import MuiForm from "topkee-mui-form";
<MuiForm schemas={schemas} rules={rules} />
Props
属性 | 默认值 | 可选值 | 说明 |
---|---|---|---|
schemas | - | - | 创建表单类型 |
rules | - | - | 校验规则基于async-validator |
schemas
表单配置参数
const Schemas = [
{
field: "name",
component: "Input",
label: "用户名",
variant: "standard",
},
{
field: "email",
component: "Input",
label: "邮箱",
variant: "standard",
},
{
field: "pwd",
component: "InputPassword",
label: "密码",
variant: "standard",
helperText: "带*_+字母+数字组合",
},
{
field: "text",
component: "InputTextArea",
label: "多行文本",
rows: 4,
variant: "standard",
},
{
field: "number",
component: "InputNumber",
label: "数字",
variant: "outlined",
},
]
Rules
表单校验配置
const rules = {
name: [
{ required: true, message: "请输入账号" },
{ required: false, min: 2, max: 5, message: "请输入2-5长度用户名" },
],
email: {
required: false,
message: "请输入邮箱地址",
},
pwd: { required: true, message: "请输入密码" },
text: { required: false, message: "请输入多行文本" },
number: { required: true, message: "请输入数字" },
};
Component 内组件的可选类型
'Input'
'InputPassword'
'InputTextArea'
'InputNumber'