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

簡介

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

  • 項目地址

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

  • 界面預覽
基於vue Ant-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>


分享到:


相關文章: