基於vue Ant-Design 的表單設計器開源項目

簡介

基於vue和ant-design-vue實現的表單設計器,樣式使用less作為開發語言,主要功能是能通過簡單操作來生成配置表單,生成可保存的JSON數據,並能將JSON還原成表單,使表單開發更簡單更快速

項目地址

https://gitee.com/kcz66/k-form-design

界面預覽

特性

可視化配置頁面提供柵格、表格等佈局佈局嵌套使用表單自定義樣式(以行內樣式插入)提供預覽、保存、生成json、生成可執行代碼等操作支持表單驗證快速獲取表單數據自定義組件插入提供高級控件自定義主題色

組件

KFormDesign 表單設計器(基於可視化操作快速設計出表單頁面,生成配置json或頁面)KFormBuild 表單構建器(根據設計器中獲取的配置json數據,快速構建出表單頁面)

安裝

<code># 使用yarn
yarn add k-form-design

# 使用npm
npm i k-form-design --save/<code>

引入組件

<code>// 在main.js引入

import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)/<code>

使用組件

<code><template>


<k-form-design>

/<template>/<code>