k-form-design 基础

(一) 简介

基于kcz66开源的k-form-design的3.6.1分支进行的二次开发。它vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速

代码地址：表单设计器: 表单设计器

(二) 特性

• 可视化配置页面
• 提供栅格、表格等布局
• 布局嵌套使用
• 表单自定义样式(以行内样式插入)
• 提供预览、保存、生成json、生成可执行代码等操作
• 支持表单验证
• 快速获取表单数据
• 自定义组件插入
• 提供高级控件
• 自定义主题色

二、新增组件

1. 表单组件

• • 表单设计器
  • 代码编辑器
  • 弹出选择器
  • 动态表单
  • 树形动态表格
  • 标签页表单
  • 单选切换表单
  • 表单内表单
  • 动表按钮
  • 颜色设置
  • 定时任务设置
  • 多选按钮
  • 切换表单按钮
  • 单选按钮
  • 图标选择器
  • 公式输入器
  • 抽屉文本框
  • 是否框
  • 动态标签
  • 输入范围

2. 布局组件

• • 折叠卡片
  • 对话框布局
  • 抽屉框布局
  • 步骤条布局
  • 折叠布局
  • 标签页布局

三、新增通用特性

• 从网络加载字典数据
• 给其它表单组件赋值
• 全局参数,适用于

• • 初始化过滤自己
  • 弹出框选择框带参查询

• 组件提示

四、安装

因为本人技术能力有限，只会本地打包，所以采用本地包安装的模式。

(一) 环境

目前支持基于 ant-design-vue 和 ele 框架的vue 2开发环境

(二) 组件

• KFormDesign

表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）

• KFormBuild

表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）

(三) 引入

1. 在 package.json 中引入 ，程序包可以去服务器下载

"k-form-design": "file:./local_modules/k-form-design-3.6.1.tgz",
"vcolorpicker" : "file:./local_modules/vcolorpicker-1.1.0.tgz",

2. 在 main.js 中全局引入

import KFormDesign from "k-form-design";
import "k-form-design/lib/k-form-design.css";
Vue.use(KFormDesign);

3. 在 具体 vue 中局部引入

import { KFormBuild } from "k-form-design/packages/use.js";

import "k-form-design/lib/k-form-design.css";

或者

import { KFormBuild } from "k-form-design";

import "k-form-design/lib/k-form-design.css";