ant-design-vue表單生成組件form-create快速上手
介紹
form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。
安裝
CDN 引入
目前可以通過 unpkg.com/@form-create/ant-design-vue 獲取到最新版本的資源，在頁面上引入 js 即可開始使用。
<!-- import Vue.js --> <script src="http://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="http://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 }, ] } ] }
浙公網安備 33010602011771號