官网：
介绍：
FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持 7 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20+ 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定
背景：saas业务，所有客户需要的采集表单不同，需要一个可以快速定义表单产出的需求所以找到了这个插件，本文主要介绍vue3版本配合element-plus使用的步骤：（
安装
javascript
//vue2版本
npm i @form-create/element-ui@^2.5
npm i element-ui
//vue3版本
npm i @form-create/element-ui@^3
npm i element-plus
//当然也可以使用其他的组件库,此处我们主要介绍element-ui
//npm i @form-create/ant-design-vue@^3或npm i @form-create/naive-ui@^3等引入和挂载
javascript
//vue2版本，在main.js文件里引入 ...代表省略其他内容
...
import { Input,...} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import lang from 'element-ui/lib/locale/lang/en'
import langzh from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'
import "@/style/element-variables.scss";
import formCreate from "@form-create/element-ui";
Vue.component(Input.name, Input);
...
//vue3版本，在main.js文件的配置
import { createApp } from 'vue'
import App from './App.vue'
import formCreate from '@form-create/element-ui';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(formCreate);
app.use(ElementPlus);
app.mount('#app');示例使用-vue3
(介绍了一些简单的属性，其实大部分规则都和组件库里是一样的)
javascript
<template>
<form-create :rule="rule" v-model:api="api" :option="options" :hideRequiredAsterisk="false" />
</template>
<script setup>
import { ref } from 'vue';
const api = ref({});
const options = ref({
onSubmit: (formData) => {
alert(JSON.stringify(formData));
},
resetBtn: true,
});
const rule = ref([
{
type: 'input',// 使用的内置组件名称-输入框
field: 'goods_name',// 字段
title: '商品名称',// 显示出来的名称
value: 'form-create', // 默认值
hidden: false, // 控制此字段显示隐藏
validate:[
{
required:true, // 控制必填
message:'请输入公司名称',
trigger:'blur'
}],
props:{
disabled:false,// 是否禁用
type:'text',
placeholder:"请输入公司名称"
},
col:{span:12,labelWidth:150},// 布局
},
{
type: 'checkbox',// 使用的内置组件名称-多选框
field: 'label',
title: '标签',
value: [0, 1, 2, 3],
options: [ // 多选框的选项
{ label: '好用', value: 0 },
{ label: '快速', value: 1 },
{ label: '高效', value: 2 },
{ label: '全能', value: 3 },
],
},
]);
</script>效果图
内置组件和属性取值的介绍
可通过 col 配置项设置布局规则
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | --- | 24 |
| offset | 栅格左侧的间隔格数 | number | --- | 0 |
| push | 栅格向右移动格数 | number | --- | 0 |
| pull | 栅格向左移动格数 | number | --- | 0 |
| xs | <768px 响应式栅格数或者栅格属性对象 |
number/object (例如： {span: 4, offset: 4}) | --- | --- |
| sm | ≥768px 响应式栅格数或者栅格属性对象 |
number/object (例如： {span: 4, offset: 4}) | --- | --- |
| md | ≥992px 响应式栅格数或者栅格属性对象 |
number/object (例如： {span: 4, offset: 4}) | --- | --- |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 |
number/object (例如： {span: 4, offset: 4}) | --- | --- |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 |
number/object (例如： {span: 4, offset: 4}) | --- | --- |
| tag | 自定义元素标签 | string | * | div |
可通过 props实现的验证规则
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| enum | 枚举类型 | string | - |
| len | 字段长度 | number | - |
| max | 最大长度 | number | - |
| message | 校验文案 | string | - |
| min | 最小长度 | number | - |
| pattern | 正则表达式校验 | RegExp | - |
| required | 是否必选 | boolean | false |
| transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
| type | 内建校验类型，可选项 | string | 'string' |
| validator | 自定义校验 | function(rule, value, callback) | - |
| whitespace | 必选时，空格是否会被视为错误 | boolean | false |
表单本身的一些属性
javascript
//表单本身的一些属性
{
//行内表单模式
inline: false,
//表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
labelPosition: 'right',
//表单域标签的后缀
labelSuffix: undefined,
//是否显示必填字段的标签旁边的红色星号
hideRequiredAsterisk: false,
//表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
labelWidth: '125px',
//是否显示校验错误信息
showMessage: true,
//是否以行内形式展示校验信息
inlineMessage: false,
//是否在输入框中显示校验结果反馈图标
statusIcon: false,
//是否在 rules 属性改变后立即触发一次验证
validateOnRuleChange: true,
//是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
disabled: false,
//用于控制该表单内组件的尺寸 medium / small / mini
size: undefined,
//是否显示 label
title: true
}通过插槽生成组件，更自由的实现自定义
vue3
javascript
<template>
<div>
<form-create v-model="formList" :rule="config" :option="{submitBtn:false,resetBtn:false}">
<template #type-slotComponent="scope">
{{ scope.rule.props.title }}: <el-input :value="''+scope.model.value" @input="(v)=>scope.model.callback(v)"/>
</template>
</form-create>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formList = ref({})
const config: any = ref([
{
"type": 'slotComponent',
"field": 'num',
"props": {
"title": '自定义插槽'
},
"col": {
"span": 24,
"labelWidth": 150
},
},
{
"field": "name",
"title": "姓名",
"type": "input",
"hidden": false,
"validate": [
{
"required": true,
"message": "请输入姓名",
"trigger": "blur"
}
],
"props": {
"type": "text",
"placeholder": "请输入姓名",
"disabled": false
},
"col": {
"span": 12,
"labelWidth": 150
},
"control": [],
"display": true,
"value": "test"
},
{
"index": 2,
"hidden": false,
"type": "select",
"field": "sex",
"title": "性别",
"options": [
{
"value": 0,
"label": "男"
},
{
"value": 1,
"label": "女"
}
],
"props": {
"placeholder": "请选择性别",
"disabled": false,
"multiple":false,
},
"col": {
"span": 12,
"labelWidth": 150
},
"validate": [
{
"required": true,
"message": "请选择性别",
"trigger": "blur"
}
]
},
{
"index": 43,
"hidden": false,
"col": {
"span": 12,
"labelWidth": 150
},
"type": "DatePicker",
"field": "birthday",
"title": "出生日期",
"props": {
"disabled": false,
"type": "date",
"format": "yyyy-MM-dd",
"placeholder": "请选择出生日期"
},
"validate": [
{
"required": true,
"message": "请选择出生日期",
"trigger": "blur"
}
],
},
{
"hidden": false,
"type": "checkbox",
"title": "备注",
"field": "remark",
"col": {
"span": 12,
"labelWidth": 150
},
"otherInput":true,
"options": [
{
"value": 1,
"label": "是"
},
{
"value": 0,
"label": "否"
}
],
"index": 43,
"props": {
"type": "text",
"placeholder": "请选择",
"disabled": false,
},
"validate": [
{
"required": false,
"message": "请选择",
"trigger": "blur"
}
],
},
])
</script>
<style scoped>
</style>效果图：
提示：所有的插件或者框架或者组件库看他们的官网才是正解