簡介
基於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>
閱讀更多 日暮笙歌 的文章