UNPKG

hr-dynamic-form

Version:

dynamic form creator

54 lines (48 loc) 1.48 kB
# 拖拉拽配置型表单 通过拖拉拽配置的方式生成表单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> ```