JSON表单生成器-form-create
source link: http://osp.io/archives/7475
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JSON表单生成器-form-create – 开源派
form-create是一款开源的在线动态表单生成器,用户只需上传 JSON 数据,即可快速生成表单。生成的表达可具有动态渲染、数据收集、验证和提交功能,支持3个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件。form-create遵守MIT开源协议。
安装:
根据自己使用的 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="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create/iview -->
<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>
element-ui
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
ant-design-vue
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/[email protected]/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/[email protected]/dist/antd.js"></script>
<!-- import form-create -->
<script src="//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)
使用:
<form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
export default {
data(){
return {
fApi:{},
value:{field1:'111',field2:'222',time:'11:11:11'},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
rule:[
{type:'input', field:'field1',title:'field1',value:'aaa'},
{type:'input', field:'field2',title:'field2',value:'sss'},
{type:'timePicker', field:'time',title:'time',value:'12:12:12'},
{
type:'ElButton',
title:'修改 field1',
native: false,
on:{
click: ()=>{
this.rule[0].value+='a'
}
},
children: ['点击'],
}
]
}
}
}
源码:https://github.com/xaboy/form-create
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK