0.0.14 • Published 2 years ago

hr-dynamic-form v0.0.14

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

拖拉拽配置型表单

通过拖拉拽配置的方式生成表单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>