hz-form-create(hz自用)

基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式

支持功能

• 远端数据获取
• 图片上传
• 富文本编辑器
• 栅格布局
• 生成 JSON
• 生成代码

1 安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install hz-form-create --save

$ yarn add hz-form-create

### 注意

1. 无论 npm 或者 cdn 引入都 项目依赖了 [acejs](https://github.com/ajaxorg/ace) , 需要在全局使用 cdn 的方式引入。

   ```javascript
   <script src='https://unpkg.com/ace-builds/src-noconflict/ace.js'></script>

2. cdn 引入 ant-design-vue 需要自行引入 moment 。

3. 不想在全局安装也可以在组件内直接使用相应的组件。

   import {
     AntdDesignForm,
     ElDesignForm,
     AntdGenerateForm,
     ElGenerateForm
   } from 'vue-form-create'

示例

npm 引入

import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue-form-create'
import 'ant-design-vue/dist/antd.css'

createApp(App)
  .use(antd)
  .use(DesignForm)
  .mount('#app')

2 组件说明

表单设计器（AntdDesignForm）

示例

<template>
  <AntdDesignForm ref="designForm" />
</template>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | :-----------: | :--------------------: | :-----: | :----: | | preview | 设计器预览操作按钮 | boolean | true | | generateCode | 设计器生成代码按钮 | boolean | true | | generateJson | 设计器生成 Json 按钮 | boolean | true | | uploadJson | 设计器导入 JSON 按钮 | boolean | true | | clearable | 设计器清空按钮 | boolean | true | | basicFields | 设计器左侧基础字段配置 | array | - | | advanceFields | 设计器左侧高级字段配置 | array | - | | layoutFields | 设计器左侧布局字段配置 | array | - | | dictionaryOptions | 字典数据第一层 | array | - | | funcOptions | 字典数据第二层 | array | - |

方法

通过 ref 可以获取到实例并调用实例方法

| 方法名 | 说明 | 参数 | | :---------------: | :--------------------------------: | :---------------------------: | | getJson() | 获取设计器配置的 JSON 数据 | - | | setJson(value) | 设置设计器的配置信息 | 通过 getJson 获取的数据 | | clear() | 清空设计器 | | | getTemplate(type) | 获取设计器生成的可以直接使用的代码 | type 的类型为 'vue' 或 'html' | | handlePhoneView | 点击手机预览方法 | | | saveForm | 点击保存方法 | | changeFuncSelect | 数据字典切换显示 |

字段说明

基础字段（basicFields）

| type | 字段名 | | :------: | :--------: | | input | 单行文本 | | password | 密码框 | | textarea | 多行文本 | | number | 计数器 | | radio | 单选框组 | | checkbox | 多选框组 | | time | 时间选择器 | | date | 日期选择器 | | rate | 评分 | | select | 下拉选择框 | | switch | 开关 | | slider | 滑块 | | text | 文字 | | url | url组件 |

高级字段（advanceFields）

| type | 字段名 | | :-------------: | :----------: | | img-upload | 图片 | | file-upload | 文件上传 | | richtext-editor | 富文本编辑器 | | cascader | 级联选择器 |

布局字段（layoutFields）

| type | 字段名 | | :--: | :------: | | grid | 栅格布局 |