hr-dynamic-form
Version:
dynamic form creator
54 lines (48 loc) • 1.48 kB
Markdown
# 拖拉拽配置型表单
通过拖拉拽配置的方式生成表单json数据,支持自定义组件的动态插入,方便业务组件开发
### 引入方式
- 全局引入 `import { InstallHDF } from 'hr-dynamic-form'; Vue.use(InstallHDF); `,引入后可使用`HCreateForm | HUseForm | WhichComponent`三个主要组件
- 局部引入 `import { 组件内容 } from 'hr-dynamic-form'`
- 组件列表
```
FormBox
ItemBox
ItemBoxSetting
RegxAdd
SelectIcon
Elements(所有元素组件均暴露,文档未补充)
WhichElement
buttonMerge
inputMerge
selectMerge
initDefaultItems
remoteMixin
checkRequiredMixin
ItemEnum
InstallHDF
```
### 设计功能
- `<HCreateForm />`
- ```
<HCreateForm
:value="dataValue"
:custom="true"
:hideElementNames="hideElementNames"
:hideFormSettings="hideFormSettings"
:hideFormSettingPanel="true"
:hideActions="hideActions"
:customElements="initCustomItems(hideElementNames)"
>
<div slot-scope="{data, model, type, prop}">
<custom-which-component :data="data" :model="model" :type="type" :prop="prop" />
</div>
<div class="actions" slot="actions" slot-scope="{ formDesign }">
<el-button type="text" icon="el-icon-copy-document" @click="createForm(formDesign)">生成表单</el-button>
</div>
</HCreateForm>
```
### 使用功能
- `<HUseForm />`
- ```
<HUseForm :formData="formData"></HUseForm>
```