hz-form-create v2.3.2
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>
cdn 引入 ant-design-vue 需要自行引入 moment 。
不想在全局安装也可以在组件内直接使用相应的组件。
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 | 栅格布局 |
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago