内容简介：form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持4个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文...
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持4个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
3.1 版本主要更新了以下内容:
- 新增 按需加载组件
- 新增 适配 naive-ui
- 新增 适配 arco-design
- 新增 适配 element-plus2.0
- 重构 element-plus
radio,checkbox组件 - 新增
html组件 - 新增
options,children字段支持异步加载 - 新增
getApi方法
不兼容项
- 重构 element-plus
upload组件, 部分配置项失效 - 重新实现
formCreateInect, 改为通过props接收
支持 UI
- element-plus
- ant-design-vue
- naive-ui
- arco-design
按需导入
如果不需要导入UI框架的全部组件,可以通过 auto-import.js 一次导入 form-create 需要的组件. 以 element-ui 为例
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)
安装
根据自己使用的 UI 安装对应的版本
element-plus^2.0
npm install @form-create/element-ui@next
ant-design-vue^3.0
npm install @form-create/ant-design-vue@next
arco-design^2.0
npm install @form-create/arco-design@next
naive-ui^2.0
npm install @form-create/naive-ui@next
引入 form-create
浏览器
<!-- import Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.min.js"></script>
<!-- import element-ui -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.0.0/dist/index.full.min.js"></script>
<!-- import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/element-ui@next/dist/form-create.min.js"></script>
NodeJs
在 main.js 中写入以下内容：
import ElementUI from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'
app.use(ElementUI)
app.use(FormCreate)
生成表单
使用 <form-create></form-create> 标签创建表单
<template>
<form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>
<script>
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
},
resetBtn:true
},
rule:[
{
type:'input',
field:'goods_name',
title:'商品名称',
value:'form-create'
},
{
type:'checkbox',
field:'label',
title:'标签',
value:[0,1,2,3],
options: [
{label:'好用',value:0},
{label:'快速',value:1},
{label:'高效',value:2},
{label:'全能',value:3},
]
},
{
type:'a-button',
title:'自定义按钮',
native: false,
on: {
click(){
alert('点击了按钮')
}
},
children: ['按钮']
},
]
}
}
}
</script>
以上所述就是小编给大家介绍的《form-create 3.1 发布，动态表单组件/适配 4 个 UI 框架》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
圈圈教你玩USB
刘荣 / 2013-4 / 59.00元
通过U盘、USB鼠标、15SB键盘、USBMIDI键盘、USB转串口、自定义的USBHID设备和自定义的USB设备等几个具体的USB例子，一步步讲解USB设备及驱动程序和应用程序开发的详细过程和步骤。第9和10章介绍USBWDM驱动开发，并给出一个简单的USB驱动和USB上层过滤驱动的实例。第2版中新增4章内容，包括USB触摸屏设备、移植到AVR单片机和ARM微控制器上以及更多的USB设备的实现。......一起来看看 《圈圈教你玩USB》 这本书的介绍吧!
