本组件是根据ANTDV 1.x版本进行的二次封装，满足一般的表单需求，数据驱动配置即用，减少Dom的书写，优化代码可读性。
重要！！！！！配置时间的时候必须引入moment模块,并且引入moment方法，否则无法使用时间限定
配置的方法主要通过配置configuration来实现，
注意事项：单个弹出框只能用一个表单，不然无法监听多个表单的变化，对于表单的输入判断，必须保持value跟ruleData的值相对应，动态生成ruleData会导致表单输入失败（antdv本身就是这样设定的，因为数据加载有前后关系）。(上传组件限制默认拦截，但是无法判断多个上传组件合用，一般业务也只会有一个。可以外挂上传组件解决问题)---已解决。使用jsx语法时发现不支持vue的@以及一些语法！！！（不清楚什么原因，希望大佬帮忙解决）
对于一些有递归的业务可以定义两层进行嵌套循环，可以跟react一样完美解决dom递归生成
主要结构为
configuration:{
//定义item内部的元素的style
innerStyle:'width:100%',
//配置按钮的样式跟文字
change:{
submit:{
//按钮上的文字
title:string,
style:string
},
reset:{
title:string,
style:string
}
},
//配置表单的ref属性
ref:'home',
//标签文本对齐方式，其中labelAlign的属性有'left' | 'right'
labelAlign:'right',
//设置itme的布局形式 可选值'horizontal'|'vertical'|'inline'
layout:'inline',
//item的长度
outStyle:'margin-top:10px;width:48%',
//表单的值，该值跟ruleFrom里的value对应,为防止重复命名可以在ruleData里面记录
ruleData:{},
//表单的属性配置，value要对等ruleData，数组配置，输入相应的字段即可
ruleFrom:[],
//设置标题跟输入框的占比
bang: {labelCol: { span: 4 },wrapperCol: { span: 18 }},
//验证方式，验证方式的属性名要跟ruleFrom的title对应
rules: {
pass: [{ validator: validatePass, trigger: 'change' }],
checkPass: [{ validator: validatePass2, trigger: 'change' }],
age: [{ validator: checkAge, trigger: 'change' }],
}
}
let checkPending;
let checkAge = (rule, value, callback) => {
clearTimeout(checkPending);
if (!value) {
return callback(new Error('Please input the age'));
}
checkPending = setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
let validatePass = (rule, value, callback) => {
if (value === '') {
// console.log(rule,value)
callback(new Error('Please input the password'));
} else {
// console.log(rule,value)
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
let validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm.pass) {
callback(new Error("Two inputs don't match!"));
} else {
callback();
}
};
组件的使用
//时间选择改变的回调
@dateChange="dateChange"
//滑块按钮改变的回调
@switchChange="switchChange"
//文件上传拦截的回调
@uploadRequest="uploadRequest"
//提交表单的回调
@submit="submit"
//清空表单的回调
@reset="reset"
<hjfForm ref="aa" :configurations="configuration"></hjfForm>
//如果使用弹出窗进行行为拦截，无需在表单中配置提交按钮。
setup:{
// 开启title自定义
title:()=>{
return <span style="color:red">ss</span>
},
// 开启footer自定义
footer:()=>{
return <a-button slot="footer" key="back">Return</a-button>
},
okButtonProps:{ props: { disabled: false } },
cancelButtonProps:{ props: { disabled: false } },
//垂直剧中
centered:true,
//右上角关闭图标
closable:true,
//是否显示
visible:false,
//确认按钮的文字
okText:'确定',
//取消按钮的文字
cancelText:'取消',
//上方的文字
// title:'11',
//弹出框的优先层
// zIndex:''
//弹出框的宽度
width:1200,
//确认按钮的加载动效
confirmLoading:false
},
configuration:{
//定义最高顶级变量单个item的值
innerStyle:'width:100%',
//配置按钮的样式跟文字
change:{
submit:{
title:'提交',
// style:'background-color:red'
},
reset:{
title:'重置',
style:'margin-left: 10px'
}
},
//配置表单的ref属性
ref:'home',
//设置标题的靠向
labelAlign:'right',
//设置itme的布局形式
// layout:'horizontal',
layout:'inline',
//设置长度
//item的长度
outStyle:'margin-top:10px;width:48%',
//表单的值，该值需要跟ruleFrom里的value对应,为防止重复命名可以ruleData里面记录
ruleData:{
// pass:'',
// age:'',
// area:undefined,
// delivery:false,
// checkbox:[],
// textarea:'',
// uploadvalue:[],
// date:[]
},
//表单的属性配置，value要对等ruleData
ruleFrom:[
{
//是否可以输入
disabled:true,
//为diff算法准备
id:1,
//输入框的类型
type:'password',
//输入框的提示语句
placeholder:'输入密码',
//给验证输入内容的函数提供对应入口
title:'pass',
//输入框的label值
label:'密码',
//
feedback:false,
autocomplete:false,
value:'pass'
},
{
id:3,
type:'number',
title:'age',
label:'年龄',
placeholder:'输入年龄',
feedback:true,
autocomplete:false,
value:'age',
},
{
id:4,
label:'地名',
title:'area',
type: 'select',
placeholder:'选择地名',
autocomplete:false,
feedback:false,
value:'area',
data:[
{
id:1,
optionValue:'1',
optionTitle:'上海',
},
{
id:2,
optionValue:'2',
optionTitle:'北京',
}
]
},
{
id:5,
//需要用到的组件类型
type:'date',
disabled: true,
//时间的格式
format:'YYYY-MM-DD HH:mm:ss',
//设置大小，//large//default//small
size:'default',
//默认选择时间
defaultValue:[moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
//时间选择器的类型
dateType:'range',
//对应规则判断，理论上除了from都可以不用
title:'datetime',
//label使用的字段
label: '时间',
feedback: false,
autocomplete: false,
//对应配对的存值属性名称
value:'date',
//不可以选择的时间
disabledDateTime:function disabledDateTime() {
return {
disabledHours: () =>range(0, 24).splice(4, 20),
disabledMinutes: () =>range(30, 60),
disabledSeconds: () => [55, 56],
};
},
// //不可以选择的日期
// disabledDate: function disabledDate(current) {
// return current && current < moment().endOf('day');
// },
},
{
id:6,
type: 'switch',
title:'delivery',
label: '开关',
value:'delivery'
},
{
id:7,
type:'checkbox',
title:'checkbox',
label: '多选框',
value:'checkbox',
data:[
{
id:1,
optionValue:'1',
optionTitle:'上海',
name:'q'
},
{
id:2,
optionValue:'2',
optionTitle:'北京',
name:'q'
}
]
},
{
id:8,
type:'radio',
title:'radio',
label:'单选框',
value:'radio',
data:[
{
id:1,
optionValue:'1',
optionTitle:'上海',
name:'q'
},
{
id:2,
optionValue:'2',
optionTitle:'北京',
name:'q'
}
]
},
{
id:9,
type:'textarea',
placeholder:'输入文本',
title:'textarea',
label:'密码',
feedback:false,
autocomplete:false,
value:'textarea'
},
{
id:10,
type: 'upload',
label: '上传',
listType:'picture',
title:'uploadvalue',
value:'uploadvalue',
showWay:'head',
url:'http://localhost',
multiple:true,
headers:{},
text:'上传'
}
],
//验证方式，验证方式的属性名要跟ruleFrom的title对应
rules: {
pass: [{ validator: validatePass, trigger: 'change' }],
checkPass: [{ validator: validatePass2, trigger: 'change' }],
age: [{ validator: checkAge, trigger: 'change' }],
},
//设置标题跟输入框的占比
bang: {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
},
},
输入框的主要类型有password,text,textarea,number.
遇到特定回调需要手动写出，根据title进行判断属于哪个组件，并进行数据处理。event为事件
@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"
input的主要api
配置文档
{
//input输入框的配置实现
//设置id
id:1,
//输入框前面的label
label:'输入框',
//存储值的变量名需要自己写入并且会对应rules的输入内容检测
value:'pass',
//输入框的类型 类型分别有text|password|textarea|number|color
type:'text',
//输入框是否可以输入值 默认值为false
disabled:false,
//输入框的大小 值有 large default small 默认为default
size:'default',
//可以点击清除图标删除内容
allowClear:true,
//textarea的高度 number
rows:6,
//默认显示文本
placeholder:'默认显示',
//输入框默认值
defaultValue:'sdad',
//带标签的 input，设置后置标签 string|slot
addonAfter:()=>{
return <span>后面</span>
},
//带标签的 input，设置前置标签 string|slot
addonBefore:()=>{
return <span>前面</span>
},
}
下拉选择有的模式 'default' | 'multiple' | 'tags' | 'combobox'
配置介绍
{
//select选择框的配置实现
//设置id
id:2,
//选择框前面的label
label:'输入框',
//存储值的变量名需要自己写入并且会对应rules的输入内容检测
value:'sle',
//选择框的类型 select
type:'select',
//选择框是否可以输入值 默认值为false
disabled:false,
//选择框的大小 值有 large default small 默认为default
size:'default',
//可以点击清除图标删除内容
allowClear:true,
//默认显示文本
placeholder:'默认显示',
//默认打开---（无效）
// defaultOpen:true,
// 手动控制展开（问题很大）
// open:false,
//下拉选择的模式 'default' | 'multiple' | 'tags' | 'combobox'
mode:'default',
//开启搜索功能
showSearch:true,
//自定义的选择框后缀图标 VNode | slot
suffixIcon:()=>{return <span>sd</span>},
//自定义的多选框清除图标 VNode | slot
removeIcon:()=>{return <span>sd</span>},
//配置option, id为diff,optionValue为code,optionTitle为要显示的数值
data:[
{
id:1,
optionValue:1,
optionTitle:'测试1'
},
{
id:2,
optionValue:2,
optionTitle:'测试2'
}
]
}
//事件回调，第一个参数为组件的名称，第二为事件回调
@dropdownVisibleChange="selectDropdownVisibleChange(item.value,$event)"
@select="selectSelect(item.value,$event)"
@blur="selectBlur(item.value,$event)"
@change="selectChange(item.value,$event)"
@search="selectSearch(item.value,$event)"
时间选择器一共有三种，通过以下配置即可使用，
{
//时间选择的配置实现
//设置id
id:3,
//选择框前面的label
label:'输入框',
//存储值的变量名需要自己写入并且会对应rules的输入内容检测
value:'ss',
//选择框的类型 date
type:'date',
//时间选择模式 date|month|range 对应不同的配置
dateType:'date',
//时间选择器是否可以输入值 默认值为false
disabled:false,
//时间选择器是否显示清除按钮
allowClear:true,
//显示的时间格式
format:'YYYY-MM-DD HH-MM-SS',
//值的时间格式
valueFormat:'YYYY-MM-DD HH-MM-SS',
//时间选择器的大小 large|small
size:'small',
//不允许选择的日期
disabledDate:(e)=>{},
//不允许选择的时间
disabledDateTime:(e)=>{},
//增加时间选择功能
showTime:true,
//默认显示
placeholder:'默认显示',
//预设时间范围快捷选择{ [range: string]: moment[] } | { [range: string]: () => moment[] }
ranges:{}
}
{
//配合diff
id:4,
//label的文字信息
label:'开关',
//配置值的变量名
value:'kai',
//选择选择框类型为 switch
type: 'switch',
//是否可用
disabled: false,
//初始是否选中
defaultChecked:'',
//加载中的开关
loading:false,
//开关大小，可选值：default small
size:'default',
//选中时的内容 string|slot
checkedChildren:()=>{return <span>不选择</span>},
//非选中时的内容 string|slot
unCheckedChildren:()=>{return <span>选择</span>}
}
@change="switchChange(item.value,$event)"
{
//配合diff
id:5,
//label的文字信息
label:'多选',
//配置值的变量名
value:'duo',
//选择选择框类型为 switch
type: 'checkbox',
//是否可用
disabled: false,
//默认选中的选项 Array
defaultValue:[1,2],
//checkbox的配置信息
data:[
{
id:1,
//真正的值
optionValue:1,
//显示的值
optionTitle:'测试1'
},
{
id:2,
optionValue:2,
optionTitle:'测试2'
}
],
//指定可选项，可以通过 slot="label" slot-scope="option" 定制label
//string[] | Array<{ label: string value: string disabled?: boolean, //indeterminate?: boolean, onChange?: function }>
options:{}
}
@change="changeCheckbox(item.value,$event)"
{
//配合diff
id:6,
//label的文字信息
label:'多选',
//配置值的变量名
value:'duo',
//选择选择框类型为 switch
type: 'radio',
//配置单选的类型 radio|button
radioType:'button',
//是否可用
disabled: false,
//默认选中的值
defaultValue:1,
//RadioGroup 下所有 input[type="radio"] 的 name 属性 string
name:'ds',
//以配置形式设置子元素 string[] | Array<{ label: string value: string disabled?: boolean }>
// options:[],
//大小，只对按钮样式生效 large | default | small
size:'default',
//RadioButton 的风格样式，目前有描边和填色两种风格 outline | solid
buttonStyle:'outline',
data: [
{
id:1,
optionValue:1,
optionTitle:'测试1'
},
{
id:2,
optionValue:2,
optionTitle:'测试2'
}
]
},
@change="radioChange(item.value,$event)"
{
//配合diff
id:7,
//label的文字信息
label:'上传',
//配置值的变量名
value:'shang',
//选择选择框类型为 switch
type: 'upload',
//是否可用
disabled: false,
//接受上传的文件类型
accept:'',
//上传的地址
action:'',
//设置上传的请求头部，IE10 以上有效
header:{},
//是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
multiple:true,
//上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
listType:'text',
}
:customRequest="customRequest"
:beforeUpload="beforeUpload"
弹出框的确认事件将会覆盖默认的表单的确认事件（抽取）
FAQs
just a form by ant
We found that hjf demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.