🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

hjf

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hjf - npm Package Compare versions

Comparing version
1.0.0
 to
1.0.1
+668
hjfForm.md
<h1>hjfForm配置文档</h1>
本组件是根据ANTDV 1.x版本进行的二次封装，满足一般的表单需求，数据驱动配置即用，减少Dom的书写，优化代码可读性。
重要！！！！！<span style='color:red'>配置时间的时候必须引入moment模块,并且引入moment方法，否则无法使用时间限定</span>
配置的方法主要通过配置configuration来实现，
注意事项：单个弹出框只能用一个表单，不然无法监听多个表单的变化，对于表单的输入判断，必须保持value跟ruleData的值相对应，动态生成ruleData会导致表单输入失败（antdv本身就是这样设定的，因为数据加载有前后关系）。上传组件限制默认拦截，但是无法判断多个上传组件合用，一般业务也只会有一个。可以外挂上传组件解决问题。使用jsx语法时发现不支持vue的@以及一些语法！！！（不清楚什么原因，希望大佬帮忙解决）
对于一些有递归的业务可以定义两层进行嵌套循环，可以跟react一样完美解决dom递归生成
主要结构为
```javascript
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' }],
}
}
```
```javascript
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();
}
};
```
组件的使用
```javascript
//时间选择改变的回调
@dateChange="dateChange"
//滑块按钮改变的回调
@switchChange="switchChange"
//文件上传拦截的回调
@uploadRequest="uploadRequest"
//提交表单的回调
@submit="submit"
//清空表单的回调
@reset="reset"
<hjfForm ref="aa" :configurations="configuration"></hjfForm>
```
```javascript
//如果使用弹出窗进行行为拦截，无需在表单中配置提交按钮。
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
},
```
```javascript
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 },
},
},
```
<h2>输入框的类型</h2>
输入框的主要类型有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)"
```
```javascript
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>
},
}
```
<h2>下拉选择|单选---select</h2>
下拉选择有的模式 'default' | 'multiple' | 'tags' | 'combobox'
配置介绍
```javascript
{
//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'
}
]
}
```
```javascript
//事件回调，第一个参数为组件的名称，第二为事件回调
@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)"
```
<h2>时间选择器</h2>
时间选择器一共有三种，通过以下配置即可使用，
```javascript
{
//时间选择的配置实现
//设置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:{}
}
```
<h2>开关Switch</h2>
```javascript
{
//配合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)"
```
<h2>Checkbox多选框</h2>
```javascript
{
//配合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)"
```
<h2>单选按钮Radio</h2>
```javascript
{
//配合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'
}
]
},
```
```javascript
@change="radioChange(item.value,$event)"
```
<h2>文件上传</h2>
```javascript
{
//配合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',
}
```
```javascript
:customRequest="customRequest"
:beforeUpload="beforeUpload"
```
<h1>弹出框设置</h1>
弹出框的确认事件将会覆盖默认的表单的确认事件（抽取） 
+196
-44
compoments/hjfForm.vue
<template>
<section style="width: 98%">
<a-form-model :ref="configuration.ref" :model="configuration.ruleData" :rules="configuration.rules" v-bind="configuration.bang" :layout="configuration.layout" :labelAlign="configuration.labelAlign">
<a-form-model-item :has-feedback="item.feedback" :label="item.label" :prop="item.title" v-for="item in configuration.ruleFrom" :key="item.id" :style="configuration.outStyle">
<a-input :disabled="item.disabled" :placeholder="item.placeholder" v-if="item.type==='password'" v-model="configuration.ruleData[item.value]" :type="item.type" :autocomplete="item.autocomplete" :style="configuration.innerStyle"/>
<a-input :disabled="item.disabled" :placeholder="item.placeholder" v-if="item.type==='number'" v-model.number="configuration.ruleData[item.value]" :type="item.type" :autocomplete="item.autocomplete" :style="configuration.innerStyle"/>
<a-input :rows="item.rows" :disabled="item.disabled" :placeholder="item.placeholder" v-if="item.type==='textarea'" v-model.number="configuration.ruleData[item.value]" :type="item.type" :autocomplete="item.autocomplete" :style="configuration.innerStyle"/>
<!-- <a-input v-if="item.type==='number'" v-model.number="configuration.ruleData[item.value]" :type="item.type" :autocomplete="item.autocomplete" :style="'width:'+configuration.style.inWidth"/>-->
<a-select @select="selectChange" :disabled="item.disabled" v-if="item.type==='select'" v-model="configuration.ruleData[item.value]" :placeholder="item.placeholder" :style="configuration.innerStyle" :autocomplete="item.autocomplete">
<a-form-model-item :has-feedback="item.feedback" :label="item.label" :prop="item.value" v-for="item in configuration.ruleFrom" :key="item.id" :style="configuration.outStyle">
<a-input :disabled="item.disabled"
:placeholder="item.placeholder"
:size="item.size"
:allow-clear="item.allowClear"
v-if="item.type==='password'"
v-model="configuration.ruleData[item.value]"
:type="item.type"
:autocomplete="item.autocomplete"
:defaultValue="item.defaultValue"
:addonAfter="item.addonAfter"
@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"
:style="configuration.innerStyle"/>
<a-input :disabled="item.disabled"
:placeholder="item.placeholder"
:size="item.size"
:allow-clear="item.allowClear"
v-if="item.type==='text'"
v-model="configuration.ruleData[item.value]"
:type="item.type"
:autocomplete="item.autocomplete"
:defaultValue="item.defaultValue"
:addonAfter="item.addonAfter"
:addonBefore="item.addonBefore"
@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"
:style="configuration.innerStyle"/>
<a-input :disabled="item.disabled"
:placeholder="item.placeholder"
:size="item.size"
:allow-clear="item.allowClear"
v-if="item.type==='number'"
v-model.number="configuration.ruleData[item.value]"
:type="item.type"
:autocomplete="item.autocomplete"
:defaultValue="item.defaultValue"
:addonAfter="item.addonAfter"
:addonBefore="item.addonBefore"
@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"
:style="configuration.innerStyle"/>
<a-input :rows="item.rows"
:disabled="item.disabled"
:placeholder="item.placeholder"
v-if="item.type==='textarea'"
v-model="configuration.ruleData[item.value]"
:type="item.type"
:autocomplete="item.autocomplete"
:defaultValue="item.defaultValue"
:addonAfter="item.addonAfter"
:addonBefore="item.addonBefore"
@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"
:style="configuration.innerStyle"/>
<a-select
:disabled="item.disabled"
:size="item.size"
:placeholder="item.placeholder"
:allowClear="item.allowClear"
:defaultOpen="item.defaultOpen"
:dropdownMatchSelectWidth="item.dropdownMatchSelectWidth"
:mode="item.mode"
:showSearch="item.showSearch"
:open="item.open"
:suffixIcon="item.suffixIcon"
:removeIcon="item.removeIcon"
v-if="item.type==='select'"
v-model="configuration.ruleData[item.value]"
:style="configuration.innerStyle"
:autocomplete="item.autocomplete"
@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)">
<a-select-option v-for="i in item.data" :value="i.optionValue" :key="i.id">

@@ -15,4 +93,6 @@ {{i.optionTitle}}

<a-date-picker
:allowClear="item.allowClear"
:locale="locale"
:format="item.format"
:valueFormat="item.valueFormat"
:size="item.size"

@@ -31,10 +111,14 @@ :disabled-date="item.disabledDate"

<a-month-picker
:allowClear="item.allowClear"
:locale="locale"
:format="item.format"
v-if="item.type==='date'&&item.dateType==='month'"
:valueFormat="item.valueFormat"
:size="item.size"
:disabled-date="item.disabledDate"
:disabled-time="item.disabledDateTime"
:disabled="item.disabled"
v-if="item.type==='date'&&item.dateType==='month'"
v-model="configuration.ruleData[item.value]"
:show-time="item.showTime"
:placeholder="item.placeholder"
:size="item.size"
:style="configuration.innerStyle"

@@ -45,38 +129,76 @@ :ranges="item.ranges"

<a-range-picker
:allowClear="item.allowClear"
:locale="locale"
v-if="item.type==='date'&&item.dateType==='range'"
:format="item.format"
:valueFormat="item.valueFormat"
:size="item.size"
:disabled-date="item.disabledDate"
:disabled-time="item.disabledDateTime"
:disabled="item.disabled"
v-if="item.type==='date'&&item.dateType==='range'"
v-model="configuration.ruleData[item.value]"
:show-time="item.showTime"
:placeholder="item.placeholder"
v-model="configuration.ruleData[item.value]"
:disabled-date="item.disabledDate"
:disabled-time="item.disabledDateTime"
:style="configuration.innerStyle"
@change="dateChange"
:show-time="{
hideDisabledOptions: true,
defaultValue: item.defaultValue,
}"
:ranges="item.ranges"
:format="item.format"
@change="dateChange(item.value,$event)"
@ok="dateOk(item.value,$event)"
/>
<a-switch
:checkedChildren="item.checkedChildren"
:unCheckedChildren="item.unCheckedChildren"
:defaultChecked="item.defaultChecked"
:disabled="item.disabled"
:loading="item.loading"
:size="item.size"
v-if="item.type==='switch'"
v-model="configuration.ruleData[item.value]"
@change="switchChange"
@change="switchChange(item.value,$event)"
/>
<a-checkbox-group :disabled="item.disabled" v-if="item.type==='checkbox'" v-model="configuration.ruleData[item.value]">
<a-checkbox :value="i.optionValue" :name="i.name" v-for="i in item.data" :key="i.id">
<a-checkbox-group
:defaultValue="item.defaultValue"
:disabled="item.disabled"
v-if="item.type==='checkbox'"
v-model="configuration.ruleData[item.value]"
:options="item.options"
@change="changeCheckbox(item.value,$event)">
<a-checkbox
:value="i.optionValue"
:name="i.name"
v-for="i in item.data"
:key="i.id">
{{i.optionTitle}}
</a-checkbox>
</a-checkbox-group>
<a-radio-group @change="radioChange" :disabled="item.disabled" v-if="item.type==='radio'&&item.radioType==='radio'" v-model="configuration.ruleData[item.value]">
<a-radio :value="i.optionValue" v-for="i in item.data" :key="i.id">
<a-radio-group
:defaultValue="item.defaultValue"
:disabled="item.disabled"
@change="radioChange(item.value,$event)"
:name="item.name"
:options="item.options"
:size="item.size"
:buttonStyle="item.buttonStyle"
v-if="item.type==='radio'&&item.radioType==='radio'"
v-model="configuration.ruleData[item.value]">
<a-radio
:value="i.optionValue"
v-for="i in item.data"
:key="i.id">
{{i.optionTitle}}
</a-radio>
</a-radio-group>
<a-radio-group @change="radioChange" :disabled="item.disabled" v-if="item.type==='radio'&&item.radioType==='button'" v-model="configuration.ruleData[item.value]">
<a-radio-button :value="i.optionValue" v-for="i in item.data" :key="i.id">
<a-radio-group
:defaultValue="item.defaultValue"
:disabled="item.disabled"
@change="radioChange(item.value,$event)"
:name="item.name"
:options="item.options"
:size="item.size"
:buttonStyle="item.buttonStyle"
v-if="item.type==='radio'&&item.radioType==='button'"
v-model="configuration.ruleData[item.value]">
<a-radio-button
:value="i.optionValue"
v-for="i in item.data"
:key="i.id">
{{i.optionTitle}}

@@ -93,4 +215,5 @@ </a-radio-button>

:list-type="item.listType"
:default-file-list="configuration.ruleData[item.value]"
:customRequest="uploadRequest"
:defaultFileList="configuration.ruleData[item.value]"
:customRequest="customRequest"
:beforeUpload="beforeUpload"
>

@@ -131,23 +254,52 @@ <a-button> <a-icon type="upload" />

methods: {
moment,
radioChange(a){
// console.log(a)
this.$emit('radioChange',a)
inputChange(name,event){
this.$emit('inputChange',name,event)
},
selectChange(a,b){
// console.log(a,b)
this.$emit('selectChange',a,b)
inputBlur(name,event){
this.$emit('inputBlur',name,event)
},
switchChange(a,b){
// console.log(a,b)
this.$emit('switchChange',a,b)
inputClick(name,event){
this.$emit('inputClick',name,event)
},
dateChange(a,b){
// console.log(a,b)
this.$emit('dateChange',a,b)
inputFocus(name,event){
this.$emit('inputFocus',name,event)
},
uploadRequest(a){
// console.log(a)
this.$emit('uploadRequest',a)
selectDropdownVisibleChange(name,event){
this.$emit('selectDropdownVisibleChange',name,event)
},
selectBlur(name,event){
this.$emit('selectBlur',name,event)
},
selectSearch(name,event){
this.$emit('selectSearch',name,event)
},
selectSelect(name,event){
this.$emit('selectSelect',name,event)
},
selectChange(name,event){
console.log(name,event)
this.$emit('selectChange',name,event)
},
dateOk(name,event){
this.$emit('dateOk',name,event)
},
dateChange(name,event){
this.$emit('dateChange',name,event)
},
switchChange(name,event){
this.$emit('switchChange',name,event)
},
changeCheckbox(name,event){
this.$emit('changeCheckbox',name,event)
},
radioChange(name,event){
this.$emit('radioChange',name,event)
},
customRequest(event){
this.$emit('customRequest',event)
},
beforeUpload(event){
return this.$emit('beforeUpload',event)
},
moment,
handleChange(e){

@@ -154,0 +306,0 @@ this.$emit('handleChange',e)

+12
-1
compoments/hjfModal.vue

@@ -33,3 +33,14 @@ <template>

handleOk(a,b) {
this.$emit('handleOk',this.$vnode.componentOptions.children[0].componentInstance.$refs[a],b)
this.$vnode.componentOptions.children.forEach((x)=>{
if (x.tag==='vue-component-8-hjfForm'){
// console.log(x.componentInstance.$refs[a],b)
// console.log(1)
this.$emit('handleOk',x.componentInstance.$refs[a],b)
}else {
// console.log(2)
}
})
// console.log(this.$vnode.componentOptions)
// console.log(this.$vnode.componentOptions.children[1].componentInstance.$refs[a])
},

@@ -36,0 +47,0 @@ handleCancel(e) {

+2
-0
index.js

@@ -11,6 +11,8 @@ //后续更新内容，待续。。。。。。。

install(vue){
console.time('奥特曼加载用时')
for(let i in all){
vue.component(i,all[i])
}
console.timeEnd('奥特曼加载用时')
}
}
+1
-1
package.json
{
"name": "hjf",
"version": "1.0.0",
"version": "1.0.1",
"description": "just a form by ant",

@@ -5,0 +5,0 @@ "main": "index.js",