FormCreate

# 更新记录

需求收集: 如果您有好的建议可以通过 github (opens new window) / gitee (opens new window) / 联系我 的方式提交给我

# 2.7.0 (2024-12-24)

  • 功能特性与3.2.13版本对齐
  • 适配TDesign Vue2版本
  • 适配Vant
  • 上传组件支持 Object[]

# 2.5.36 (2024-06-02)

  • 新增 增加options.onChange参数
  • 新增 api增加getRenderRule方法,用于获取最终渲染规则
  • 新增 api增加getRefRule方法,用于通过name查询组件规则
  • 新增 api增加getData方法,用于获取全局数据
  • 新增 control.condition增加empty,notEmpty和pattern对比方式
  • 新增 api增加fetch方法,用于请求远程接口
  • 新增 update回调增加linkField参数
  • 新增 组件增加disabled配置,全局禁用表单组件
  • 优化 子表单基础表单配置
  • 优化 重置默认值逻辑
  • 优化 表单禁用逻辑
  • 优化 JSON解析
  • 修复 避免请求2次触发

# 2.5.35 (2024-03-31)

  • 新增 api增加Top字段, 获取最顶级表单的api
  • 新增 组件增加disabled配置,全局禁用表单组件
  • 优化 子表单基础表单配置
  • 优化 group 组件

# 2.5.34 (2024-03-11)

  • 组件增加title插槽,支持自定义表单的标签区域
  • 修复 options.title 配置不生效问题

# 2.5.33 (2023-09-12)

  • options中增加beforeFetch配置,用于处理fetch请求时的参数
  • fetch中的action支持配置为promise, 直接加载数据
  • select组件支持渲染optionGroup组件
  • 新增 formCreate新增setData和removeData方法
type setData = (name:string,value:any) =>void;
type removeData = (name:string)=>void;
  • 新增 增加loadData自定义属性
//设置数据
formCreate.setData('address',[]);

//生成规则
{
    type:'select',
    options: [],
    effect: {
        loadData:{
            attr:'address',
            to:'options'
        }
    }
}
  • 优化group组件

# 2.5.32 (2023-08-11)

  • 重构 group组件, 重写样式,并增加序号和上下移动功能,增加sortBtn和parse参数
  • 新增 api中新增wrapEl和formEl方法,用于获取对应的vue组件实例
  • 优化 fetch.parse 配置,支持配置字符串,指定路径,例如props.options

# 2.5.31 (2023-07-14)

  • 优化 替换代码中的eval方法

# 2.5.30 (2023-06-29)

  • 优化validate方法保持向下兼容

# 2.5.29 (2023-06-28)

  • 新增 rule中的update配置项增加了一个来源参数,可以用来判断触发方式
type Origin = 'init' | 'link' | 'change';
type update = (value:any, api:Api, origin:Origin) => boolean|undefined;
  • 新增 增加针对field设置插槽,格式为'field-'+field
//生成规则
{
  field:'name'
}

<form-create>
  <slot #field-name="slot">
    //render
  </slot>
</form-create>
  • 新增 增加自定义属性componentValidate, 可以通过组件的方法进行验证
//生成规则
{
  effect: {
    componentValidate: true
    // componentValidate: 'check'
  }
}

//自定义组件
{
  methods:{
    //check(){//todo}
    formCreateValidate(val,call) {
      //todo
      call();
    }
  }
}
  • 新增 前后缀组件支持注入formCreateInject
  • 增加 validate-fail表单验证失败和validate-field-fail字段验证失败事件
  • 修改validate和validateField方法,返回promise
  • 修复upload组件value错误的问题
  • 修复checkbox组件勾选的问题

# 2.5.28 (2023-04-17)

  • 新增 增强control配置项,增加method,condition配置
type method=  'display' | 'disabled' | 'hidden' | 'required';
type condition = '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween';
  • 新增 支持通过rule.cache来配置组件是否只渲染一次
  • 优化 自定义属性required
  • 修复 group组件按钮展示问题
  • 修复 设置自定义属性required后,验证规则失效问题

# 2.5.27 (2022-10-07)

  • 优化 uniqueId方法的生成规则,默认F开头
  • 优化组件渲染

# 2.5.26 (2022-08-21)

  • 新增 api中新增clearEffectData方法, 支持清空effect数据
  • 新增 options中新增forceCoverValue配置项,可以设置modelValue是否覆盖更新,默认为false
  • 新增 支持重写fetch请求方法
formCreate.fetch = (options) =>{
  //todo
}
  • 优化 api中的coverValue方法
  • 优化 elementUI中的group组件展示
  • 优化 rule中的type非必填,默认为input
  • 优化 api中的resetFields方法

# 2.5.25 (2022-07-24)

  • 优化自定义属性required和fetch
  • 更新 ts
  • 优化内置组件传参

# 2.5.24 (2022-07-03)

  • 修改required属性默认的提示语
  • 修复 control 可能失效 bug

# 2.5.23 (2022-06-19)

  • 修复 value 数据可能有误
  • 优化内置组件的 key
  • 优化 resetFields 方法

# 2.5.22 (2022-06-05)

  • api 新增 deferSyncValue 方法
  • 优化 display 配置
  • 优化 group 组件

# 2.5.21 (2022-05-11)

  • 修复 frame组件 width 配置无效问题 #498
  • 优化 required 自定义属性

# 2.5.20 (2022-05-01)

  • options 新增 appendValue 配置项, 控制formData 中是否包含表单中不存在的字段,默认为false #485

  • rule 新增 component 配置项, 快速定义用于规则渲染的自定义组件. 之前需要先挂载自定义组件

    例如:

    //通过 component 设置自定义组件
const rule = {
    type:'test',
    component: {
        render(h){
            return h('span','test')
        }
    }
}

  • api 新增 setEffect 方法, 设置组件的自定义属性

    例如:

    const rule = {
  type:'input',
  field:'input',
  effect:{
    required: true
  }
}

api.setEffect('input','required', false);

  • 优化 重新实现subForm, 自动绑定子表单, 无需手动绑定

  • 优化 打包

  • 优化 group 组件, 修改子表单规则后回自动同步修改已生成的子表单规则

  • 修复 update属性对null值的 bug #488

# 2.5.19 (2022-03-20)

  • 优化 required 自定义属性

# 2.5.18 (2022-03-15)

  • formCreate 新增 getApi 方法,通过全局方法获取表单的api

  • 组件新增 name 配置项

    例如:

    <form-create name="form" :rule="rule" />

    const api = formCreate.getApi('form')

  • 新增 requierd 自定义属性, 可以实现不同value类型的表单组件必填

    例如:

    //设置组件必填
const rule = {
  type:'input',
  effect:{
    required: true
  }
}
//自定义错误信息
const rule = {
  type:'input',
  effect:{
    required: '自定义错误信息'
  }
}
//关闭组件必填
const rule = {
  type:'input',
  effect:{
    required: false
  }
}

  • 新增 支持通过$[attr]设置自定义属性

    例如:

    //自定义错误信息
const rule = {
  type:'input',
  $required: '自定义错误信息'
}

  • 新增 html 组件

    例如:

    const rule = {
  type:'html',
  children: ['<span>html</span>']
}

  • 更新 frame 组件, 可以通过form_create_helper.api操作表单

  • 更新 group 组件 props 增加 defaultValue 配置项

# 2.5.17 (2022-01-07)

  • 新增 ant-design-vue 支持 ts
  • 新增 子表单支持插槽扩展
  • 优化 json 解析

# 2.5.16 (2021-12-28)

  • 优化 组件值同步
  • 优化 upload 组件

# 2.5.15 (2021-12-24)

  • 增加 parseFn 方法
  • 优化 复制规则
  • 优化 editor 组件
  • 优化 组件值同步

# 2.5.14 (2021-12-19)

  • 优化 fetch支持设置为function
  • 修复 复制规则可能出错问题
  • 修复 修改options后,没有选中问题

# 2.5.13 (2021-12-01)

  • 新增 预览模式
  • 新增 beforeCreate,created,update 事件
  • api 新增 emit, all 方法
  • 优化 info 信息触发点
  • 优化 富文本组件, 增加 config 配置项
  • 修复 options 没有更新问题

# 2.5.12 (2021-11-19)

  • 修复 options 可能报错问题
  • 优化稳定性

# 2.5.11 (2021-10-17)

  • 新增 deep 配置项

  • 优化 允许 field 重复

  • 优化 frame,upload组件, 允许禁用时预览

  • 优化 json 解析

  • 优化 value同步

  • 修复 control 首次可能不生效问题

  • 删除 helper

# 2.5.10 (2021-10-07)

  • 新增 支持通过插槽扩展组件, 例如自定义inputNumber组件的渲染,通过type-input-number插槽扩展 (说明)

  • 新增 form.title配置项, 全局配置,不生成组件的 label

  • 增强 json 解析

  • 增强 control 功能, 支持控制当前 rule 中规则的显示状态

      {
      value: 1,
      rule: ['field1', 'field2']
  }

不兼容项

  • 修改 repeat 事件名称为 repeat-field

  • 移除 fc.sub-form 事件监听

  • 修改注入组件 props 名称为 formCreateInject

    • formCreate > formCreateInject.api
    • formCreateOptions > formCreateInject.options
    • formCreateRule > formCreateInject.rule
    • formCreateField > formCreateInject.field
    • fc.sub-form 事件 > formCreateInject.subForm()

# 2.5.9 (2021-09-18)

  • 新增 subForm 组件新增 syncDisabled 配置项

  • 新增 factory 方法, 创建一个全新的 formCreate 对象 (说明)

  • 新增 自定义属性新增load事件,调整 init事件触发时机

  • 新增 repeat 事件, 当组件字段重复时触发

  • 优化 formData 数据, 支持增量返回额外字段

  • 优化 支持element-ui表单的label-suffix配置项 #402

  • 优化 remove事件触发时机

  • 优化 增强json解析功能

  • 修复 移除规则时可能意外报错问题

# 2.5.8 (2021-07-25)

  • 支持 自定义 key
  • 新增 group 组件新增 syncDisabled 配置项
  • 修复 control.prepend 配置项 #370
  • 优化 fetch.parse 配置项 #367

# 2.5.7 (2021-06-04)

  • 修复 fetch 可能无效问题

# 2.5.6 (2021-05-04)

  • 新增 optionsTo 配置项
  • 新增 group 组件新增onBeforeAdd和onBeforeRemove 配置项
  • 优化 允许children为 null和 undefined
  • 修复 操作children时可能报错问题

# 2.5.5 (2021-04-24)

  • 新增 removeField,removeRule 事件
  • 优化 fetch 方法
  • 优化 change 事件
  • 修复 editor 组件 disabled 可能失效问题
  • 完善 tpyescript

# 2.5.4 (2021-04-11)

  • 新增 在运行时解析toJson生成的函数字符串
  • 优化 toJson 方法
  • 优化 element-ui 弹窗显示
  • 修复 group 组件 value 可能显示错误问题
  • 修复 option.global 可能会丢失问题
  • 完善 tpyescript

# 2.5.3 (2021-04-05)

  • 新增 toJson 方法
  • 优化 effect 触发
  • 优化 select 组件
  • 优化 info 显示
form-create-designer Vue表单设计器组件开源

# 2.5.2 (2021-03-28)

  • 新增 fetch 功能
  • 优化 effect 功能
  • 优化 子表单option继承
  • 优化 打包
  • 优化 sub-form,group 组件
  • 优化 title 显示
  • 优化 typescript
  • 修复 ant-design-vue 布局失效问题

# 2.5.1 (2021-03-20)

  • 优化 内置组件插槽配置
  • 优化 frame,group,sub-form,select组件
  • 优化 value同步机制
  • 修复 control 可能报错问题
  • 优化 reload 机制
  • 修复 全局配置 col 无效问题
  • 新增 fapi新增parent和children属性
  • 新增 sync 配置项, 支持 props 同步
  • 优化 validate,validateField方法
  • 修复 page失效问题
  • 优化 表单销毁机制
  • 优化 参数注入
  • 优化 typescript

# 2.5.0 (2021-02-15) 金牛年🌟

  • 重构内部核心代码
  • 优化内部渲染机制
  • 优化内部生命周期事件
  • 重构 TypeScript
  • 新增 nextTick方法,设置渲染后的回调
  • 新增 use方法,类似 Vue
  • 新增 支持分页加载组件,加速首屏渲染
  • 新增 自定义配置项effect
  • 新增 支持修改type
  • 新增 control支持配置规则插入位置
  • 优化 control符合条件的都会生效,之前版本只能生效第一个
  • 新增 支持给组件配置前缀后缀 prefix, suffix
  • 新增 update配置,value发送变化后触发
  • 新增 link 配置项,value变化后主动触发其他规则的update
  • 新增 支持局部挂载自定义指令 directive
  • 新增 支持 wrap 配置项,配置FormItem
  • 新增 object 组件
  • 新增 支持自定义title,info组件
  • 新增 富文本组件wangEditor
  • 新增 nativeEmit属性,通过 emit 方式监听原生事件
  • 新增 原生事件支持事件注入
  • 新增 display 配置项,控制组件显示状态
  • 支持 value.sync 获取双向绑定的 formData
  • 优化 错误提示
  • 增强 UI扩展,组件扩展,parser扩展,maker扩展
  • 优化 默认的表单提交按钮
  • 优化 group 组件样式
  • 重构 group 组件
  • 新增 coverValue方法,覆盖方式设置表单值
  • 优化 拆分原有的updateRule为updateRule,mergeRule

不兼容项

  • 移除 ant-design-vue的 labelCol,wrapperCol配置,合并到wrap配置项
  • 修改 group组件定义rule后value类型,可通过定义props.field解决
  • 修改 updateRule方法, 移除第三个参数. 用mergeRule代替
  • 移除 setParser,createParser方法
  • 重构 TypeScript
  • 移除 set-value事件,合并到change事件
  • 修改 on-reload事件名称为reload
  • 移除 emit事件field中的_转换为-

# 1.0.20 (2020-11-01)

  • 优化 错误提示
  • 优化 group组件expand配置项
  • 优化 upload组件被禁用时无法预览问题 #268
  • 修复 hidden 配置项可能失效问题
  • 修复 hidden 组件无法重置问题
  • 修复 maker.group 方法不存在

# 1.0.19 (2020-09-11)

  • 新增 Group 组件 expand 属性,控制默认打开个数
  • 新增 通过 Group 组件监听子表单的事件
    {
    type:'group',
    //...
    props: {
        rules: [
            {
                type: 'input',
                field: 'test',
                emit: ['change'],
                //...
            }   
        ]   
    },
    on: {
        ['test-change']: function () {
            //TODO input 组件 change 事件
        }
    }
}
  • 修复 Group组件value可能会不同步问题
  • 修复 upload 组件previewMask参数无效问题
  • 优化 emit 事件触发
  • 新增 emit-event 事件,有 emit 时触发

# 1.0.18 (2020-08-12)

# 1.0.17 (2020-07-16)

  • 修复 hidden 可能会失效问题
  • 修复 group 组件可能会额外生成多组的问题
  • 修复 control 可能会失效的问题
  • 修复 datePicker,timePicker组件 formatValue 可能导致报错的问题
  • 新增 frame 组件支持通过previewMask配置预览图片弹窗的遮罩是否显示
  • 优化 $emit 事件
  • 优化 表单销毁时可能报错
  • 优化 frame组件助手方法加载时机
  • 新增 支持设置 title 的 class,style 等属性
    let rule = {
  title:{
      class:'titleClass',
      style:'backgroundColor:red',
      title:'商品名称'
  }
  //title:'商品名称'    
}

# 1.0.16 (2020-06-17)

  • 修复 渲染时可能出现死循环
  • 修复 antd.switch 组件修改值问题
  • 修复 antd.select placeholder 不显示
  • 更新 TypeScript
  • 修复 group 组件remove事件修改值时UI可能不更新问题
  • 修复 frame 组件预览可能无法正常显示问题
  • 新增 group 组件支持控制按钮隐藏按钮大写和自定义按钮,
    • 配置项 fontSize,button,
    • 插槽 button,default

# 1.0.15 (2020-05-31)

  • 优化 parseJson,toJson 方法,避免错误解析function
  • 优化 对生成规则的深拷贝
  • 优化 group 组件生成的子表单自动跟随父表单的配置
  • 新增 control.handle 方法增加第二个参数fApi
  • 新增 frame 组件支持reload,okBtn,closeBtn配置,form_create_helper增加onOk,onClose方法可设置页面关闭回调事件
  • 重构 frame,upload 组件的弹出框,移除原有的modal
  • 修复 upload 预览可能死循环问题
  • 修复 group 组件验证可能不通过问题
  • 修复 toJson 可能出现规则丢失问题
  • 修复 全局配置labelCol,wrapperCol不生效问题
  • 修复 hidden 组件可能会渲染问题

# 1.0.14 (2020-05-14)

  • 优化 frame 组件 value 类型
  • 修复 frame 组件 在safari浏览器下无法正常关闭问题

# 1.0.13 (2020-05-11)

  • 优化 $f.append,$f.prepend方法
  • 修改 内置的copyRule方法
  • 优化 自动拷贝生成规则的条件
  • 支持 控制是否自动生成col,row组件和设置class

# 1.0.12 (2020-04-30)

  • 修复 局部挂载时fragment组件报错
  • 修复 removeField可能无效问题
  • 新增 双向数据绑定的 formData $f.form
  • 新增 control事件,control生效或移除时触发

# 1.0.11 (2020-04-21)

  • 移除 ElementUI label多行的样式
  • 修复 ts vue.use(formCreate)类型报错问题 #196
  • 新增 maker 实例增加inject,model方法
  • 新增 内置fragment组件
  • 修复 maker 二次追加属性不生效问题
  • 支持 ant-design-vue 文档
    npm i @form-create/ant-design-vue@^2.5

# 1.0.10 (2020-04-18)

  • 修复 timePicker组件偶尔无法选择问题
  • 修复 在ie10中可能报错问题
  • 修复 parseJson方法可能报错问题
  • 修复 control可能不生效问题
  • 重构 vData类,支持事件重复监听
  • 修复 onSubmit方法报错问题
  • 修复 frame组件width,height属性类型错误问题
  • 修复 checkbox组件可能报错问题
  • 修复 control控制的规则多包裹一层div #199
  • 新增 frame组件增加srcKey配置项,支持value为对象
  • 新增 group 组件增加change事件
  • 新增 表单整体的change事件
  • 优化 ElementUI label多行的样式
  • 优化 ts #196

# 1.0.9 (2020-03-24)

  • 修复 field 可能重复问题
  • 修复 DatePicker 组件验证时可能报错问题

# 1.0.8 (2020-03-15)

  • 修复 合并公共布局规则时报错问题 #181
  • 修复 group 组件有可能会报错的问题
  • 修复 追加组件后验证失效问题
  • 修复 DatePicker 组件值转换问题
  • 更新 TypeScript
  • 增加 优化method方法,可拿到返回值
  • 增加 在group组件的事件中传入index #183
  • 增加 增加control配置项,可用于控制其他组件显示
  • 增加 options.form.className 配置项,支持设置表单的class

# 1.0.7 (2020-03-02)

  • 修复 初始化全局配置时的字段错误 #166
  • 修复 DatePicker组件验证报错问题
  • 更新 TypeScript
  • 修复 frame组件src修改后,没有实时更新问题
  • 增加 group组件,可实现数组组件,hash组件功能
  • 优化 组件生成规则复用
  • 优化 组件信息提示按钮位置

# 1.0.6 (2020-01-16)

  • 支持TypeScript
  • 修复elm.frame组件在input类型icon不显示问题
  • 修复iview.tree组件首次渲染没有选中问题

# 1.0.5 (2019-12-7)

  • 重构 hidden,visibility功能
  • 生成规则增加 hidden,visibility 配置项
  • 修复 value 可能会意外发生改变问题
  • 修复 value 改变后,页面组件有可能没有渲染问题

# 1.0.4 (2019-11-21)

  • 新增 formData配置项,可设置表单初始值
  • 修复 type 未定义时可能出现死循环问题
  • 修复 type 大写时可能未识别组件问题
  • 支持 iview v4版本
npm i @form-create/iview4@^2.5

# 1.0.3 (2019-08-26)

  • 修复 多次v-if后表单内控件绑定的事件失效 #125 (opens new window)
  • 修复 toJson方法函数转json
  • 修复 内置按钮不显示时,移除多余的布局 div
  • 新增 手动触发事件方法$f.trigger
  • 新增 获取组件vm方法$f.el
  • 增强 props 中的函数支持事件注入
  • 增强 removeField,updateRule返回当前规则
  • 增强 事件注入参数中增加self当前规则
  • 增强 vm 参数支持设置为Function
{
    vm:function(){
        return new Vue;
    }
}

# 1.0.2 (2019-08-11)

  • 修复 样式被覆盖问题 #121 (opens new window)
  • 修复 datePicker,timePicker 组件验证问题,取值问题 #118 (opens new window)
  • 修复 append,prepend 方法报错
  • 增强 生成规则定义name后,可通过component方法获取
  • 增加 on,off,once 方法绑定 emit 事件

# 1.0.1 (2019-07-29)

  • 增加 $f.updateValidate,$f.updateValidates 方法 #116 (opens new window)
  • 修复 输入框设置最大最小字符无效 #115 (opens new window)
  • 修复 upload组件同时上传多张图片报错问题
  • 修复 ElementUI.upload组件加载动画不显示问题

# 1.0.0 (2019-07-21)

  • 修复 timePicker 组件无法选择问题
  • 修复 type为template时会引发栈溢出问题 #110 (opens new window)
  • 新增 自定义组件props中自动注入$f,可以用props.formCreate接收
  • 新增 $f.getRule方法,获取指定field的生成规则

# 0.0.5 (2019-07-07)

  • 优化 $f.toJson 方法,不支持转换 template 组件
  • 新增 $f.updateRule,$f.updateRules 方法
//更新 goods_name
$f.updateRule('goods_name',{
    props:{
        disabled:true
    }
})
//批量更新
$f.updateRules({
    'goods_name':{
        props:{
            disabled:true
        }
    }
})
  • 新增 injectEvent 全局配置项,设置是否开启事件注入,注入$f,rule等参数.开启后事件的第一个参数为注入的参数
//注入参数的数据结构
{
    $f:Object,//api
    rule:Array,//生成规则
    option:Object,//全局配置
    inject:Any,//自定义注入的参数
}


//全局开启
{
    injectEvent:true
}
//指定事件开启
rule:{
    //inject为事件额外的自定义注入参数
    emit:[{name:'click',inject:true}]
}
  • 修复 移除组件的同时又新增field与移除组件相同的组件时组件收到值undefined问题

# 0.0.4 (2019-06-30)

  • 新增 $f.toJson和formCreate.parseJson 方法, 将生成规则转为 json 和反转
  • 新增 info 配置项,配置组件的提示信息
  • 新增 option.info配置项,设置组件提示信息的相关配置
  • 移除 对时间组件,日期组件的值得二次处理
  • 增加 $f.method 方法不存在时的错误提示
  • 增加 frame 组件的 modal 配置项,可设置modal的属性
  • 修复 element-ui 部分组件 placeholder 属性无效问题
  • 更新 element-ui 时间组件,日期组件 maker 生成器

# 0.0.3

内部功能重构、 功能精简和优化、 扩展更简单

新功能

  • 自定义组件可转换为表单组件,具有验证和内置组件的功能
  • 增加组件的全局配置
  • 增加 name配置项,自定义组件可配置
  • 增加 判断表单是否修改的方法 changeStatus
  • 增加 获取组件隐藏状态方法hiddenStatus
  • 增加 rule.native 配置项
  • 增加 $f.method 方法,可调用组件方法

修改

  • 将 switch 组件 slot 配置,移动到 props.slot 中
  • 修改 $f.validate 方法的参数
  • 修改 $f.hidden,$f.visibility,$f.disabled 方法的参数顺序
  • 修改 方法名$f.submitStatus => $f.submitBtnProps
  • 修改 方法名$f.resetBtnStatus => $f.resetBtnProps
  • 重构 frame 组件,移动event到 props 中

移除

  • 移除 自定义组件相关事件
  • 移除 frame 组件 spin 配置项
  • 移除 全局配置中 upload 配置项
  • 移除 表单最外层的 margin 20px
  • 移除 $f.btn.finish和$f.resetBtn.finish 方法
  • 移除 defaultSlot 配置项
  • 移除 内置组件自动填充默认属性
  • 移除 组件规则中的hidden和visibility属性
  • 移除 upload 组件 onSuccess 中返回 url 自动添加功能
  • 移除 iview版 event 配置项自动添加on-前缀功能

← 仓库说明 →