免费开源的低代码表单FormCreate安装教程，支持可视化设计，适配移动端

news2025/1/15 20:41:48

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

源码地址: Github | Gitee

低代码表单FormCreate

特点

多平台与框架支持

  • 支持 Vue2 和 Vue3 版本：

FormCreate 兼容不同版本的 Vue 项目，确保无缝集成。

  • 支持 6 个主流 UI 框架：
    • Element Plus
    • Ant Design Vue
    • Naive UI
    • Arco Design
    • TDesign
    • Vant UI (适用于移动端)
  • 移动端支持：

专为移动端优化，能够生成适配 Vant UI 风格的动态表单。

表单生成与配置

  • 通过 JSON 生成表单

基于 JSON 配置动态生成表单，无需手动编写繁琐的表单代码。

  • 自定义组件
    • 生成任意 Vue 组件，并轻松集成到表单中。
    • 内置数据验证，确保表单输入的正确性。
    • 通过简单配置快速扩展组件功能。
    • 自定义组件轻松转换为表单组件，满足复杂业务需求。
  • 全局配置

支持全局表单配置、组件全局配置和表单事件，统一管理表单行为和样式。

功能扩展与灵活性

  • 自定义配置项扩展

根据业务需求扩展表单功能，快速适应不同场景。

  • 支持组件设置前后缀

为表单字段添加前后缀，提升用户体验。

  • 组件联动

实现表单组件之间的联动和动态更新，轻松应对复杂表单逻辑。

  • 强大的 API

通过 API 快速操作表单，进行数据获取、设置、验证等操作。

  • 双向数据绑定

表单数据与界面双向绑定，确保实时更新 UI 和数据。

  • 事件扩展与注入

自定义表单事件处理逻辑，增强表单的交互能力。

高性能与布局

  • 高性能

内置优化机制，确保表单的快速响应和高效渲染。

  • 数据验证

支持多种复杂验证规则，确保输入数据的合法性。

  • 栅格布局

支持复杂的栅格布局，轻松实现响应式表单设计。

  • 子表单与分组

支持子表单和分组管理，适合处理复杂的数据结构。

内置组件

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

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

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

低代码表单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 进行双向绑定的。

低代码表单FormCreate

安装与引入

使用 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()
        }
    })

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2110625.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

网页时装购物：Spring Boot框架的创新应用

网页时装购物：Spring Boot框架的创新应用

第2章相关技术 2.1 B/S架构 B/S结构的特点也非常多&#xff0c;例如在很多浏览器中都可以做出信号请求。并且可以适当的减轻用户的工作量&#xff0c;通过对客户端安装或者是配置少量的运行软件就能够逐步减少用户的工作量&#xff0c;这些功能的操作主要是由服务器来进行控制的…
阅读更多...
时尚购物革命：Spring Boot技术在网页时装系统中的应用

时尚购物革命：Spring Boot技术在网页时装系统中的应用

第1章 绪论 1.1背景及意义 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们生活水平的不断提高&#xff0c;日常生活中人们对时装购物系统方面的要求也在不断提高&#xff0c;喜欢购物的人数更是不断增加&#xff0c;使得时装购物系统的开发成为必需而且紧迫的…
阅读更多...
Rspack 1.0 发布了！

Rspack 1.0 发布了！

文章来源&#xff5c;Rspack Team 项目地址&#xff5c;https://github.com/web-infra-dev/rspack Rspack 是基于 Rust 编写的下一代 JavaScript 打包工具&#xff0c; 兼容 webpack 的 API 和生态&#xff0c;并提供 10 倍于 webpack 的构建性能。 在 18 个月前&#xff0c;我…
阅读更多...
深度学习 --- VGG16能让某个指定的feature map激活值最大化图片的可视化(JupyterNotebook实战)

深度学习 --- VGG16能让某个指定的feature map激活值最大化图片的可视化(JupyterNotebook实战)

VGG16能让某个指定的feature map激活值最大化图片的可视化 在前面的文章中&#xff0c;我用jupyter notebook分别实现了&#xff0c;预训练好的VGG16模型各层filter权重的可视化和给VGG16输入了一张图像&#xff0c;可视化VGG16各层的feature map。深度学习 --- VGG16卷积核的可…
阅读更多...
说一下场外的伦敦银交易的技巧

说一下场外的伦敦银交易的技巧

在很多讨论伦敦银交易技巧的文章中&#xff0c;一上来就介绍各种交易指标、K线信号等等&#xff0c;这种开门见山的方式很直接也很方便&#xff0c;但也容易忽略了一些场外的技巧&#xff0c;下面我们就来讨论一下场外的关于伦敦银交易的技巧。 何为场外的技巧呢&#xff1f;场…
阅读更多...
Java进阶13讲__第十讲__精简

Java进阶13讲__第十讲__精简

字节流 字节输入流&#xff1a;FileInputStream&#xff08;原始流/低级流&#xff09; 字节缓冲流&#xff1a;BufferedInputStream&#xff08;包装流/处理流&#xff09; 参数是"低级流" 字节输入流/缓冲流常用格式 byte[] arr new byte[1024];//字节流 int l…
阅读更多...
灯塔：MYSQL笔记（2）函数

灯塔：MYSQL笔记（2）函数

函数 是指一段可以直接被另一段程序调用的程序或代码。 字符串函数 SELECT 函数(参数); 数值函数 SELECT 函数(参数); -- 生成一个六位验证码 select lpad(round(rand()*1000000,0) ,6,0)as 验证码; 日期函数 流程函数 总结&#xff1a; 约束&#xff1a; 1. 概述&#xff…
阅读更多...
vim 安装与配置教程（详细教程）

vim 安装与配置教程（详细教程）

vim就是一个功能非常强大的文本编辑器&#xff0c;可以自己DIY的那种 &#xff0c;不但可以写代码 &#xff0c;还可编译 &#xff0c;可以让你手不离键盘的完成鼠标的所有操作。 如果想要了解vim的的发展历史和详细解说&#xff0c;可以自行上网搜索&#xff0c;我主要是记录一…
阅读更多...
第T10周：数据增强

第T10周：数据增强

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/0dvHCaOoFnW8SCp3JpzKxg) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊](https://mtyjkh.blog.csdn.net/)** 在本教程中&#xff0c;你将学会如何进行数…
阅读更多...
【NLP自然语言处理】文本处理的基本方法

【NLP自然语言处理】文本处理的基本方法

目录 &#x1f354;什么是分词 &#x1f354;中文分词工具jieba 2.1 jieba的基本特点 2.2 jieba的功能 2.3 jieba的安装及使用 &#x1f354;什么是命名实体识别 &#x1f354;什么是词性标注 &#x1f354;小结 学习目标 &#x1f340; 了解什么是分词, 词性标注, 命名…
阅读更多...
Java笔试面试题AI答之JDBC（3）

Java笔试面试题AI答之JDBC（3）

文章目录 13. 编写JDBC连Oracle的程序?14. 简述JDBC的主要组件有哪些 &#xff1f;15. JDBC中如何防止SQL注入攻击&#xff1f;1. 使用预处理语句&#xff08;PreparedStatement&#xff09;2. 避免在SQL查询中直接拼接用户输入的数据总结 16. JDBC的脏读是什么&#xff1f;哪…
阅读更多...
Windows下Python和PyCharm的应用(一)__第一个测试程序

Windows下Python和PyCharm的应用(一)__第一个测试程序

1、下载Python安装包 直接从官网下载&#xff0c;百度里搜出来的Python下载&#xff0c;很多是别的公司的商业广告&#xff0c;千万要注意&#xff0c;不要乱点进去&#xff0c;免得浪费时间。 从官网下载&#xff0c;链接&#xff1a;Download Python | Python.org 2、安装Pyt…
阅读更多...
网络编程day03（网络体系结构、调试命令、TCP/IP对比）

网络编程day03（网络体系结构、调试命令、TCP/IP对比）

目录 1》网络的体系结构 1> OSI模型 2> TCP/IP模型 3> 常见网络协议 4> DNS域名解析协议 2》 网络调试命令 1> ping&#xff1a;测试网络连通性&#xff08;ICMP&#xff09; 2> netstat 3》Dos &#xff08;拒绝式服务&#xff09;攻击&#xff1f;…
阅读更多...
怎么在mathtype中打空格 MathType空格键不能用

怎么在mathtype中打空格 MathType空格键不能用

MathType是一款数学公式编辑器&#xff0c;可以帮助用户创建复杂的数学公式和方程式。它提供了一个用户友好的界面&#xff0c;使得编辑和排版数学公式变得更加容易和高效。用户可以直接在其界面中输入公式&#xff0c;也可以将已有的公式从其他文档中复制粘贴过来进行编辑。在…
阅读更多...
【2024数模国赛赛题思路公开】国赛B题第二套思路丨附可运行代码丨无偿自提

【2024数模国赛赛题思路公开】国赛B题第二套思路丨附可运行代码丨无偿自提

2024年数模国赛B题解题思路 B 题 生产过程中的决策问题 一、问题1解析 问题1的任务是为企业设计一个合理的抽样检测方案&#xff0c;基于少量样本推断整批零配件的次品率&#xff0c;帮助企业决定是否接收供应商提供的这批零配件。具体来说&#xff0c;企业需要依据两个不同…
阅读更多...
秋燥拜拜，中秋润起来，酒茶香中秋有“礼”

秋燥拜拜，中秋润起来，酒茶香中秋有“礼”

话说这初秋啊&#xff0c;真是个让人又爱又恨的季节&#xff01; 爱它的秋高气爽&#xff0c;恨它的天干物燥。就像是我们刚刚结束了一个炎热的夏天&#xff0c;身体还没来得及适应&#xff0c;就被秋天的干燥给来了个“突然袭击”。鼻子干、嘴唇干、喉咙干&#xff0c;感觉整个…
阅读更多...
hcip什么时候考试？一文带您了解hcip考试报名与预约流程

hcip什么时候考试？一文带您了解hcip考试报名与预约流程

其他考试一般都会有固定的时间&#xff0c;但hcip不一样&#xff0c;它的考试时间并不固定&#xff0c;这就让考生很是疑惑&#xff1a;hcip什么时候考试呢?除了知道考试时间之外&#xff0c;还要了解hcip的报名条件、报名流程等相关内容。关于这些问题的答案&#xff0c;小编…
阅读更多...
blender图像如何分层导出？blender动画云渲染

blender图像如何分层导出？blender动画云渲染

在blender渲染时产品会被其他物体影响&#xff0c;这时候就可以用到blender中的阻隔&#xff1b;分层导出图像到PS中进行校色等后期处理。 在分层前&#xff0c;我们需要先打开渲染属性-胶片-透明&#xff0c;这样导出的图像才是透明背景的&#xff0c;反之会变成黑色底。 第一…
阅读更多...
使用GPU加速及配置

使用GPU加速及配置

配置CUDA 英伟达 https://developer.nvidia.com/cuda-downloadsPython python要求3.8.x版本以上 python下载 https://www.python.org/getit/使用pytorch 查询地址&#xff1a; https://pytorch.org/index.html给出建议&#xff1a; 可以直接 pip3 install torch torchv…
阅读更多...
如何实现思维导图简单漂亮？其实并不难

如何实现思维导图简单漂亮？其实并不难

如何实现思维导图简单漂亮&#xff1f;思维导图是一种非常有效的思考和组织工具&#xff0c;它通过图形化的方式帮助我们梳理信息、激发创意。一个简单又漂亮的思维导图不仅能提高工作效率&#xff0c;还能让人赏心悦目。为了帮助你在学习和工作中更加得心应手&#xff0c;下面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023