在前端框架中使用开源的FormCreate低代码表单安装教程

低代码表单FormCreate是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。它支持 6 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

源码地址:

Github: https://github.com/xaboy/form-create

Gitee: https://gitee.com/xaboy/form-create

内置组件

FormCreate 内置了大量常用的表单组件，满足各种场景需求：

• hidden：隐藏字段
• input：文本输入框
• inputNumber：数字输入框
• checkbox：复选框
• radio：单选框
• switch：开关
• select：下拉选择框
• autoComplete：自动完成输入框
• cascader：级联选择器
• colorPicker：颜色选择器
• datePicker：日期选择器
• timePicker：时间选择器
• rate：评分组件
• slider：滑块
• upload：文件上传
• tree：树形控件
• frame：框架组件
• group (子表单)：子表单组件
• subForm (分组)：分组组件

FormCreate 通过丰富的功能和强大的扩展性，能够帮助开发者快速构建复杂的表单系统，无论是企业级应用还是小型项目，都能轻松应对。

安装

FormCreate 支持多个主流 UI 框架，您可以根据自己项目的需求选择对应的版本进行安装。

请根据您项目中使用的 UI 框架，安装对应的 FormCreate 版本。

Vant UI 版本 移动端

npm i @form-create/vant^3

Element Plus 版本

npm i @form-create/element-ui@^3

Ant Design Vue 版本

npm i @form-create/ant-design-vue@^3

Naive UI 版本

npm i @form-create/naive-ui@^3

Arco Design 版本

npm i @form-create/arco-design@^3

TDesign 版本

npm i @form-create/tdesign@^3

安装后的初始配置

安装完对应的 FormCreate 版本后，您需要将其引入并配置在 Vue 项目中。以下是通用的配置步骤，具体根据您的项目结构和 UI 框架可能略有不同。

引入和注册 FormCreate

在 main.js 或 main.ts 中引入并注册 FormCreate：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'; // 根据您选择的 UI 框架调整
import 'element-plus/dist/index.css'; // 样式文件

import formCreate from '@form-create/element-ui'; // 引入 FormCreate

const app = createApp(App);

app.use(ElementPlus); // 挂载 UI 框架
app.use(formCreate); // 挂载 FormCreate

app.mount('#app');

在组件中使用 FormCreate

<template>
  <div id="app">
    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({});
const formApi = ref(null);

const formRules = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名',
    value: '',
  },
  {
    type: 'input',
    field: 'password',
    props: {
        type:'password'
    },
    title: '密码',
    value: '',
  }
]);
</script>

在上面的示例中，我们定义了一个简单的登录表单，包括用户名、密码输入框。表单数据 (formData) 和 API 实例 (formApi) 都是通过 v-model 进行双向绑定的。

安装与引入

使用 CDN 引入

通过 CDN 引入 Vue、Element Plus 和 FormCreate，非常适合快速原型开发和测试。

<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入 Element Plus -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js"></script>
<!-- 引入 FormCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/element-ui@^3/dist/form-create.min.js"></script>
<!-- 挂载组件 -->
<script>
    const app = Vue.createApp({});
    app.use(ElementPlus);
    app.use(formCreate);
    app.mount('#app');
</script>

使用 Node.js 引入

在 Vue 项目中通过 npm 安装并引入 Element Plus 和 FormCreate。

npm install @form-create/element-ui
npm install element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'

const app = createApp(App)
app.use(ElementPlus)
app.use(formCreate)
app.mount('#app')

生成表单

FormCreate 提供了两种方式生成表单：组件模式和全局方法。

组件模式

使用 <form-create> 标签创建表单，适用于大多数 Vue 项目。

<template>
    <formCreate :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></formCreate>
</template>
<script setup>
    // 导入 form-create
    import formCreate from "@form-create/element-ui";
    import {ref} from "vue";
    // 获取 formCreate 组件, 小于3.2版本时需要手动获取组件
    // const FormCreate = formCreate.$form();
    const fApi = ref({});
    const formData = ref({});
    const options = ref({
        // 表单提交事件
        onSubmit: function (formData) {
            alert(JSON.stringify(formData))
        }
    });
    const rule = ref([
        {
            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},
            ]
        },
    ]);
</script>

全局方法

使用 formCreate.create(rule, option) 全局方法生成表单。适用于需要在非 Vue 组件中动态生成表单的场景。

<div id="app">
    <div id="goods-form"></div>
</div>

//表单插入的节点
const root = document.getElementById('goods-form')

const fApi = window.formCreate.create(
    //表单生成规则
    [
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称'
        },
        {
            type: 'datePicker',
            field: 'created_at',
            title: '创建时间'
        }
    ],
    //组件参数配置
    {
        el: root,
        //显示表单重置按钮
        resetBtn: true,
        //表单提交事件
        onSubmit: function (formData) {
            //按钮进入提交状态
            fApi.btn.loading()
        }
    })