Antd Vue 表單生成快速開發指南

以前發佈了一款基於Element的表單設計器，能夠快速設計和生成表單，設計器地址：form.xiaoyaoji.cn/。如今我能夠告訴你們，Antd表單支持來了，能夠使用設計器設計好表單後，快速生成Antd表單，提供了強大的Api操做。接下來就來看看如何快速生成表單：

1. 引入 Ant Design Vue

npm install ant-design-vue -S
複製代碼

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
複製代碼

更多的引入方式請參考文檔 快速上手。

使用Antd Pro Vue 的可直接跳過該步驟。

2. 引入 FormMaking 高級版本包

下載地址

點擊下載地址能夠下載到 FormMaking 高級版本試用包。

下載完成後解壓到項目中，這裏咱們在根目錄建立 lib目錄來放資源，解壓出來目錄結構以下：

而後在須要用到的地方引入組件，或者直接在main.js中引入便可。

import {
  GenerateAntdForm,
} from '../lib/form-making-advanced'
import '../lib/form-making-advanced/dist/FormMaking.css'

Vue.use(GenerateAntdForm)
/* 或寫爲 * Vue.component(GenerateAntdForm.name, GenerateAntdForm) */
複製代碼

注：在項目中使用 import 引入時，須要將 babel 的sourceType參數設置爲unambiguous，以下:

"babel": {
  "sourceType": "unambiguous"
}
複製代碼

3. 設計表單

點擊進入 表單設計器官網 設計表單，在表單屬性中選擇 Ant Design ，點擊生成代碼便可生成出直接能夠使用的 vue 組件，以下：

直接將生成的代碼拷貝到項目vue文件中，這樣一個簡單的表單就生成好了，查看效果以下：

4. 更多功能

• 支持數據驗證
• 支持動態獲取數據
• 支持隱藏禁用等豐富的操做API
• 支持國際化
• 等等等

更多的功能能夠查看 官方文檔，解鎖更多的姿式。

5. 聯繫咱們

若是你們在使用中過程當中有任何問題歡迎 聯繫咱們。也能夠直接加入咱們qq羣進行討論：985558286