組件分享之前端組件——用于自定義表單的前端組件form-create

背景

近期正在探索前端、后端、系統端各類常用組件與工具，對其一些常見的組件進行再次整理一下，形成標準化組件專題，后續該專題將包含各類語言中的一些常用組件。歡迎大家進行持續關注。

組件基本信息

• 組件：form-create
• 開源協議：MIT license
• 官網：www.form-create.com/v2/

內容

本次分享一款用于自定義表單的前端組件form-create，它可以通過JSON生成動態呈現、數據收集、驗證和提交功能。支持3個UI框架，并支持生成任何Vue組件。內置20種常用表單組件和自定義組件，無論多么復雜的表單都可以輕松處理。

安裝

根據自己使用的 UI 安裝對應的版本

iview

npm install @form-create/iview

view-design

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

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

引入

iview

<!-- import Vue.js -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" >
<!-- import iView -->
<script src="http://unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create/iview -->
<script src="http://unpkg.com/@form-create/iview/dist/form-create.min.js"></script>

element-ui

<!-- import Vue.js -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" >
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="http://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

ant-design-vue

<!-- import Vue.js -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link  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>

NodeJs:

iview

import formCreate from '@form-create/iview'
Vue.use(formCreate)

element-ui

import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)

image.png

更多內容可以參考其官方的REAMDE

本文聲明：

88x31.png