npm package: @ohion/form-builder
Description: 基于vue3和element plus的表单构建工具
Author: lychengoho
Latest version: 0.2.0

# @ohion/form-builder

## Base on Vue3 and Element-plus


#### 基础用法
```
<template>
  <div>
    <OhionFormBuilder :model="model" :formItems="formItems">
    </OhionFormBuilder>
  </div>
</template>

<script setup lang="tsx">
import OhionFormBuilder from '@ohion/form-builder'

import { ref } from 'vue'

const model = ref({ name: 'john', age: 18 })

const formItems = [
  {
    prop: 'name',
    label: 'name',
    type: 'input' // turn into 'el-input'
  },
  {
    prop: 'age',
    label: 'age',
    type: 'input-number' // turn into 'el-input-number'
  }
]
</script>
```


#### 组件API

##### 属性（除以下属性，其余属性同[Element Plus Form Props](https://element-plus.gitee.io/zh-CN/component/form.html)）
| 属性 | 说明 | 类型           |默认值 |
| ------ | ---- | -------------- | --- |
| model  | 表单数据对象	    | Record\<string, any> | -   |
| formItems | 表单项数据    | Arrayable\<FormItemConfig> | - |
| itemWidth | 表单项宽度     | string | - |



##### 方法
| 方法名称 | 说明 | 类型           |
| ------ | ---- | -------------- |
| getFormRef  | 表单数据对象	    |  |
| getItemRef  | 表单数据对象	    |  |
| applyFormMethods  | 表单数据对象	    |  |
| validate  | 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。	    | (callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise\<void> |
| validateField  | 验证具体的某个字段。		    | (props?: Arrayable\<FormItemProp>, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise\<void> |
| resetFields  | 重置该表单项，将其值重置为初始值，并移除校验结果	    | (props?: Arrayable\<FormItemProp>) => void |
| clearValidate  | 清理某个字段的表单验证信息。		    | (props?: Arrayable\<FormItemProp>) => void |
| scrollToField  | 滚动到指定的字段	    | (prop: FormItemProp) => void |


##### 事件
| 事件名称 | 说明 | 回调参数           |
| ------ | ---- | -------------- |
| validate  | 任一表单项被校验后触发	    | (prop: FormItemProp, isValid: boolean, message: string) => void |
| change  | 任一表单项被触发change事件后触发	    | (args: Arrayable\<any>, formItem: FormItemConfig, index: number, model: Record\<string, any>) => any |


##### FormItemConfig属性（除以下属性，其余属性同[Element Plus Form Item Props](https://element-plus.gitee.io/zh-CN/component/form.html)）
| 属性 | 说明 | 类型           |默认值 |
| ------ | ---- | -------------- | --- |
| type  | 组件类型，element组件名，会自动带上el前缀	    | string | -   |
| custom | 是否自定义组件    | boolean | - |
| component | 自定义组件     | string \| DefineComponent | - |
| visible | 是否显示     | boolean \| function(model, formItem, index) | - |
| style | 表单项样式    | object | - |
| disabled | 是否禁用    | boolean \| function(formItem, model) | - |
| children | 表单项子项    | Arrayable\<FormItemConfig> | - |
| required | 是否必填    | boolean \| function(formItem, model) | - |
| width | 表单项宽度    | string | - |
| minWidth | 表单项最小宽度    | string | - |
| directives | 指令    | Directive | - |
| ref | 表单组件ref名称，用于获取组件实例    | string | - |
| slotName | 表单组件slot名称    | string | - |
| slots | 渲染插槽    | Arrayable\<FormItemConfig> | - |
| renderLabel | 自定义渲染label    | function(formItem, model, index) | - |
| renderInner | 组件默认插槽自定义渲染    | function(formItem, model, index) | - |
| render | 自定义渲染    | function(formItem, model, index) | - |
| formatter | 数据格式化    | function(value, formItem, model, index) | - |
| text | 文本内容    | string | - |
| events | 组件事件    | object | - |
| props | 表单组件props    | object | - |