阅读 223

【YcDynamicForm文档】前端动态表单(一套配置/多套UI) - 戴向天

大家好!我叫戴向天

QQ群:602504799

如若有不理解的,可加QQ群进行咨询了解

yc-dynamic-form

Introduction

文档编辑者:戴向天 / 白玺东

更新时间:2021 年 8 月 8 日

动态表单企鹅群: 877965995

官方 Api 文档地址:www.yangchan.work/yc-dynamic-…

优点

  • 只需要通过配置信息就可实现动态表单的生成,且满足大部分业务需求

  • 实现一套配置兼容多套 UI,通过配置映射表(mapping)兼容自定义表单组件及大部份 UI 库的表单组件如:【Ant Design of Vue,element-ui】

  • 表单配置项可动态修改

  • 支持自定义组件及自定义事件扩展

  • 支持数据填充时/数据获取时进行拦截处理

  • 支持配置函数中 this 调用内置表单事件及全局事件(this 指向内置表单, 表单在 vue 下)

  • 表单内置事件可链式调用

扩展

  • 开发者可以在配置信息上进行加上自己自定义的 key 名,从而去实现功能。为二次封装做下了良好的基础。

npm 安装

npm install yc-dynamic-form
复制代码

使用

import YcDynamicForm from 'yc-dynamic-form'
Vue.use(YcDynamicForm)
复制代码

<template>
  <YcDynamicForm :gutter="30" :config="config" :mapping="mapping" :format="format" />
</template>

<script>
import YcDynamicForm from "yc-dynamic-form";
import * as elementUI from "./mapping/element-mapping.js";
export default {
  components: {YcDynamicForm},
  data(){
    return {
      mapping: elementUI,
      format: elementUI.format,
      config: [
        {
          children: [
            {label: '姓名',type: 'input',prop: 'name'},
            {label: '年龄',type: 'input',prop: 'age'},
          ]
        }
      ]
    }
  }
}
</script>
复制代码

Attributes

参数说明类型可选值默认值
config表单的配置信息array-[]
rules效验规则,具体的参考相对应的 UI 框架object-{}
gutter默认的间距number-null
layout表单布局,根据自己选择的 UI 框架相对的布局参数string-null
mapping映射表object-{}
format数据格式化拦截器:set & getobject--
parentName父级的options.name值,主要是用来获取对应的父级并做相对应的父级函数调用,之所以需要这个参数是因为防止在某些情况下,动态表单的options.name值,主要是用来获取对应的父级并做相对应的父级函数调用,之所以需要这个参数是因为防止在某些情况下,动态表单的parent 被嵌套多层,导致所获取的parent,非正确的parent,非正确的parentstring--

Mapping

参数说明是否未必选项类型
componentMapping组件映射配置信息(键值对)。key 名就是自定义的组件名称,value:实际上的组件名称。 例如:{'input': 'el-ipnut'}object
modelMappingmodel 映射表(键值对)。key 名就是组件 model 的触发事件名称,value:componentMapping 的 key 名数组【】。由于不同 UI 框架的不同数据绑定方式,有些组件是通过 change 来触发 model,有的是通过 input 进行触发 model。{'change':[]}object
defaultValueMap组件默认值(键值对)。key 名就是 componentMapping 的 key 名,value:默认值。例如:{'input':''}object
placeholderMapping组件 placeholder 处理. key 名就是 componentMapping 的 key 名,value: label 的前缀。 例如:{'input':'请输入'}object
format表单数据设置和获取的拦截处理。object
format.set表单数据设置拦截处理。注意的是:该方法的 this 指向是动态表单。共接受三个参数:key, value, typefunction
format.get表单数据获取的拦截处理。注意的是:该方法的 this 指向是动态表单function

Methods

方法名说明参数返回
getForm获取表单-返回当前的表单元素
getParent获取父级节点,注意的是:需要依赖的就是需要在 props 里面告知 parentName 的值,也就是页面或者组件的 name 参数$options.name-返回父级节点,或者 null
runCreateHandler运行每一项 events 中事件名称为 create 的事件信息,只触发一次-
getCreateHandlerMap获取每一项 events 中事件名称为 create 的事件信息-function[]
getConfigList获取所有的配置信息-返回一个列表形式的配置信息: IConfigSign[]
getConfig获取指定的配置信息arr: IConfig, prop: stringIConfigSign
createNewConfig信息配置信息,主要是防止配置信息的内存地址与新的配置信息一直,所影响到初始化的配置信息IConfigIConfig
trigger主动触发指定的 prop 的配置信息中的指定事件prop: string, eventName: stringthis
setLocalParams设置当前表单的作用域数据信息key: string, value: anythis
setLocalParamsMap批量设置当前表单的作用域数据信息{ key: string,value: any }[]this
getLocalParams获取当前 form 的作用域数据信息.当 key 有值的时候将会获取指定的数据,若没有则进行获取作用域的所有数据;key?: stringobject
setData以键值对的方式设置表单数据key: string, value: anythis
setDataMap批量设置表单数据{ key: string,value: any }[]this
getParams获取表单的数据包含有通过 setLocalParams/setLocalParamsMap 所设值的本地数据,默认返回表单的数据信息,当参数为 true 的是就是代表进行表单验证再获取结果并返回一个 Promisebool?: BooleanObject | Promise
validateFields表单效验-Promise
getFieldsValue获取表单数据{ key: string,value: any }[]this
setOptions给指定的 prop 配置信息进行设置选项。普遍用在与 select/radioprop: string,options: any[]this
setOptionsMap批量进行给指定的 prop 配置信息进行设置选项。普遍用在与 select/radio{ [key: string]: any[] }this
setDisabled给表单的每一项进行设置是否禁用效果。 当 props 有值的时候,则就是给指定的 prop 或者指定 prop 数组进行设置是否禁用效果,当 props 没有值的时候,则是代表全部 prop;disabled: boolean, props?: stringstring[]
getOptions获取指定 prop 值的选项列表,当第二个参数 value 有值的时候则就是获取选项中指定 value 的选项信息prop: string, value?: stringnumber
update通过 prop 值进行更新指定的配置信息prop: string, config: IConfigSignlethis
replace替换指定 prop 值的配置信息prop: string, config: IConfigSignlethis
delete删除指定的 propprop: stringthis
push添加配置信息,该添加是直接在根级节点的配置信息上进行添加一个一行数组config: IConfigthis
appendBefore添加到指定 prop 字段前面prop: string, config: IconfigSignlethis
appendAfter添加到指定 prop 字段后面prop: string, config: IconfigSignlethis

Events

事件名说明参数返回
loaded当动态表单加载完毕之后进行触发的{vm: 动态表单,formData: 表单信息}-
formHandler当 events 配置有 method,并且$props.parentName 没有进行配置的时候进行触发method:当前 events 的 method 值,{value:当前 prop 的值,formData:表单数据,config:当前的 prop 的配置信息,args: 当前原函数的 argments}-

ConfigSingle

参数说明是否为必选项类型
label表单 labelstring
prop数据的 key 名称,可为点连接的数据。例如:user.namestring
type来源与 mapping.componentMapping 配置信息中的 key 名string
bind当前选中的组件的$props 参数object
itemBind当前组件的 form-item 的$props 参数object
hideLabel是否隐藏 label,当为 true 的时候则就会在相对应的项中添加'hideLabel'的 class 名称boolean
span所占当前父级宽度的空间,以 24 等份为基础进行计算对应的空间number
required是否为必填项boolean
rules单个 prop 的效验规则数组。同所用的 UI 框架一致。需要注意的是:里面自定义的 validator 函数的 this 指向是动态表单的 thisarray
events自定义事件处理函数array
events[0].name当前所选的组件所能触发的事件名称。当 name 值为 create 的时候,则就会在组件加载完毕后进行触发一次string
events[0].hadnler自定义函数,当前的函数的 this 指向是动态表单的 thisfunction
events[0].method当前动态表单的父级节点的 method 函数。需要注意的是:必须配置$props.parentNamestring
slots自定义插槽function
optionType来源与 mapping.componentMapping 配置信息中的 key 名。主要使用来配合 select/raido 的选项列表string
文章分类
前端
文章标签