1.0.0 • Published 10 months ago
easy-form-design v1.0.0
easy-form-design
简介
easy-form-design 是一个基于 vue2, element-ui,vuedraggable 的自定义表单设计器。主要功能是能通过简单操作来生成配置表单,生成可保存的 JSON 数据,并能将 JSON 还原成表单,使表单开发更简单更快速。
组件
- EasyFormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置 json 或页面)
- EasyFormBuild 表单构建器(根据设计器中获取的配置 json 数据,快速构建出表单页面)
安装
// use npm
npm install easy-form-design -S
// use yarn
yarn add easy-form-design
// use pnpm
pnpm add easy-form-design
使用
使用前请确认已安装配置了 element-ui
文档还未完善,先凑活看吧。或者看源码的 EasyFormBuild 和 EasyFormDesign 文件夹
全局注册
// main.js
import Vue from 'vue';
import 'easy-form-design/lib/easyFormDesign.css';
import EasyFormDesign from 'easy-form-design';
Vue.use(EasyFormDesign);
局部注册
import 'easy-form-design/lib/easyFormDesign.css'; // 这个可在项目入口文件引入
import { EasyFormDesign, EasyFormBuild } from 'easy-form-design';
export default {
components: {
EasyFormDesign,
EasyFormBuild,
},
};
集成源码
git 上下载源码,把 src/components 拷贝到自己的项目下,index.js 为入口文件可以通过 Vue.use 的方式注册或者局部注册。
使用方法
<!-- 表单设计器 -->
<template>
<div>
<EasyFormDesign ref="formDesign"></EasyFormDesign>
</div>
</template>
export default {
methods: {
/* 初始化已有表单,例如已编辑过表单设计器导出json的,可以用这个方法还原 */
initForm() {
this.$refs.formDesign.initForm(fromJson); //fromJson导出的json
},
/* 导出表单json方法 */
exportForm() {
this.$refs.formDesign.exportForm();
},
/* 表单预览方法 */
preViewForm() {
this.$refs.formDesign.preViewForm();
},
},
};
<!-- 表单构建器 -->
<template>
<div>
<EasyFormBuild ref="formBuild" @validateSuccess="validateSuccess"></EasyFormBuild>
</div>
</template>
export default {
methods: {
initForm() {
// 初始化表单构建器
this.$refs.formBuild.initForm(data); //data是表单设计器导出的json
// 给表单构建器的组件设置默认的值
this.$nextTick(() => {
this.$refs.formBuild.setFormData(json); //json是个对象{组件uuid:默认值,组件uuid:默认值}
});
},
/* 校验成功 */
validateSuccess(ruleForm, formJsonList) {
// ruleForm 用户填写的表单值json, formJsonList 原始表单json
},
/* 表单重置 */
resetForm() {
this.$refs.formBuild.resetForm();
},
},
};
EasyFormDesign
props
Methods
名称 | 说明 | 入参 | 回调参数 |
---|---|---|---|
exportForm | 导出 JSON | - | JSON 数组 |
preViewForm | 表单预览 | - | - |
initForm | 初始化表单 | Array or 不传 | - |
Attributes
名称 | 说明 |
---|---|
formBtns | 表单设计器按钮组区域(默认展示按钮 预览表单、导出 JSON) |
EasyFormBuild
Events
名称 | 说明 | 回调参数 |
---|---|---|
validateSuccess | 表单校验成功回调 | Object |
Methods
名称 | 说明 | 入参 | 回调参数 |
---|---|---|---|
validateForm | 表单校验 | - | Object |
resetForm | 表单重置 | - | - |
initForm | 初始化表单 | 表单 JSON | - |
setFormData | 设置表单值 | JSON ({组件 uuid: value}) | - |
slots
名称 | 说明 |
---|---|
btns | 表单构造器按钮组(默认展示按钮 表单校验、表单重置按钮) |
1.0.0
10 months ago
0.6.0-beta
1 year ago
0.5.6-beta
1 year ago
0.5.5-beta
1 year ago
0.4.5-beta
1 year ago
0.3.5-beta
1 year ago
0.3.4-beta
1 year ago
0.3.3-beta
1 year ago
0.3.2-beta
1 year ago
0.3.1-beta
1 year ago
0.2.4-beta
1 year ago
0.1.4-beta
1 year ago
0.1.3-beta
1 year ago
0.1.2-beta
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago