ant-design-vue表單生成組件form-create快速上手

介紹

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。並且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。

文檔 | github

安裝

CDN 引入

目前可以通過 unpkg.com/@form-create/ant-design-vue 獲取到最新版本的資源，在頁面上引入 js 即可開始使用。

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NPM

安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i @form-create/ant-design-vue

引入

import formCreate from '@form-create/ant-design-vue'

支持

• ant-design-vue ^1.5.3
• elment-ui
• iview

功能

- 持支持3種 UI 框架
- 支持自定義表單組件
- 可生成任何Vue組件
- 自帶數據驗證
- 組件插槽設置
- 通過 JSON 生成表單
- 通過 Maker 生成表單
- 強大的API，可快速操作表單
- 雙向數據綁定
- 事件擴展
- 事件注入
- 局部更新
- 數據驗證
- 柵格布局
- 內置組件17種常用表單組件

生成

<template>
     <form-create v-model="fApi" :rule="rule" :option="option"></form-create>
</template>

<script>
export default {
  data () {
    return {
     //實例對象
     fApi:{},
     //表單生成規則
     rule:[
       {
          type:'input',
          field:'goods_name',
          title:'商品名稱'
        },
        {
          type:'datePicker',
          field:'created_at',
          title:'創建時間'
        }
     ],
     //組件參數配置
     option:{
       //表單提交事件
       onSubmit:function (formData) {
         alert(JSON.stringify(formData));
       }
     }
    };
  }
};
</script>

數組組件/組件嵌套

可以通過group組件實現組件數組,嵌套對象功能

 

 

{
    type:"group",
    title:"標簽",
    field:" label",
    value:[],
    props:{
        min:1,
        max:5,
        rule:{
            type:'input',
            field:'input',
            props:{disabled:false},
            validate:[{required:true}]
        }

    },
    validate:[
        {required:true, type: 'array', min: 1, message: '最少添加1個標簽'}
    ]
}

 

Control 配置項

可以通過control配置項實現通過組件的值控制其他組件是否顯示

 

 

當用戶選中包郵選項后會自動顯示number組件

{
    type:"radio",
    title:"是否包郵",
    field:" is_postage",
    value:0,
    options: [
        {value: 0, label: '不包郵', disabled: false},
        {value: 1, label: '包郵', disabled: false},
    ],
    control:[
        {
            value:1,
            rule:[
                {
                    type: 'number',
                    field: 'postage_money',
                    title: '滿額包郵',
                    value: 0
                },
            ]
        }
    ]
}