1.0.3 • Published 2 years ago
hjf v1.0.3
本组件是根据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"弹出框的确认事件将会覆盖默认的表单的确认事件（抽取）