首页 > 其他分享 >基于Vue的低代码,6K star的可视化表单设计器工具,多端适配

基于Vue的低代码,6K star的可视化表单设计器工具,多端适配

时间:2024-09-03 16:53:16浏览次数:13  
标签:npm Vue star form 适配 create 表单 组件 FormCreate

FormCreate 是一款基于Vue的低代码可视化表单设计器工具,它通过数据驱动的方式实现了表单的动态渲染。用户仅需通过直观的界面即可快速构建出功能完备的表单。

图片

FormCreate 的主要特性包括:

  • 多端适配:支持PC和移动设备,内置丰富的插件和强大的功能。

  • 国际化:提供中文、英文、日文等语言支持,方便全球用户使用。

  • 事件绑定:支持配置各种组件和表单事件,实现动态交互。

  • 丰富的组件库:内置多种组件,涵盖多种应用场景。

  • 低代码设计:以数据为中心的表单渲染机制,简化了数据管理。

  • 变量绑定:增强多组件间的联动效果,支持动态更新。

  • 阅读模式:轻松切换编辑与查看模式,增强代码复用性。

  • 灵活布局:提供多种布局方式,简化表单排版。

  • 公式计算:内置多种计算公式,满足特定需求。

  • 框架适配:适配Vue2和Vue3

图片

技术架构

FormCreate 采用Vue作为核心框架,支持多种UI库,如Vant、Element Plus、Ant Design Vue等,确保了其在不同环境下的良好表现。

图片

功能清单

  • Input 输入框

  • Password 密码输入框

  • Textarea 多行输入框

  • Radio 单选框

  • Cascader 多级联动

  • Upload 上传

  • Select 下拉选择框

  • Checkbox 多选框

  • InputNumber 数字输入框

  • TimePicker 时间选择器

  • TimeRangePicker 时间区间选择器

  • DatePicker 日期选择器

  • DateRangePicker 日期区间选择器

  • Switch 开关

  • ColorPicker 颜色选择框

  • Rate 评分

  • Slider 滑块

  • Tree 树形组件

  • TreeSelect 树形下拉选择框

  • Transfer 穿梭框

部署方式

FormCreate 支持多种UI框架的集成,只需通过npm安装对应版本即可开始使用:

npm i @form-create/vant@^3
npm i @form-create/element-ui@^3
npm i @form-create/ant-design-vue@^3
npm i @form-create/naive-ui@^3
npm i @form-create/arco-design@^3
npm i @form-create/tdesign@^3

安装后,需要在Vue项目中进行相应的配置:

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';
const app = createApp(App);
app.use(ElementPlus);
app.use(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>

开源协议

FormCreate 是一个开放源代码项目,遵循MIT许可证,允许商业用途,并易于进行定制开发。

PC端设计器

一款强大的设计工具,它支持复杂的栅格、弹性盒子、表格等布局选项,用户可以通过可视化界面快速高-效地创建表单。为用户提供优质的使用体验,提高开发效率。

图片

移动端设计器

专为移动端研发的表单设计工具,处理移动端动态表单需求。提供了35种常用组件,广泛覆盖多种场景需求,以满足不同的用户需求。

图片

亮点功能

绑定变量,计算公式,逻辑条件,弹窗设计

图片

核心优势

提供框架源码,支持定制开发,节省运营成-本,产品持续迭代。

图片

组建丰富

提供了46种常用组件,广泛覆盖多种场景需求,以满足不同的用户需求。同时支持自定义扩展,提升个性化使用体验。

图片

多元化布局 多种复杂表单布局方式,包括栅格、弹性盒子、表格等,这些功能让复杂的表单布局变得趋于简洁明了。

图片

阅读模式

支持阅读模式与表单模式无缝切换,显著提高代码复用率,优化生产效率,提升用户使用体验。

图片

公式计算

提供了52种计算公式,能够灵活满足您在实际业务中的计算需求,大大提升数据分析效率,确保数据的准确与有效性。

图片

图片

Pro版本:

图片

移动表单设计器:

图片

 FormCreate官网:https://www.form-create.com

帮助文档:介绍 | FcDesigner Pro

体验地址:FcDesigner Pro在线演示

开源地址:https://github.com/xaboy/form-create

标签:npm,Vue,star,form,适配,create,表单,组件,FormCreate
From: https://blog.csdn.net/2401_85161170/article/details/141866340

相关文章

  • vue3使用路由守卫出现的问题合集
    登录后停留在登录页面无法跳转--24.9.3原代码:functionisRoute(to){letres=router.getRoutes()letresFil=res.filter(item=>item.path===to.path)returnresFil.length>0}router.beforeEach((to,from,next)=>{if(to.path!=='/login'......
  • Vue+Express全栈开发项目实战技能:‌从0到1打造完整电商项目
    Vue+Express全栈开发项目实战技能:‌从0到1打造完整电商项目在Web开发领域,‌全栈开发是一个涵盖前端和后端技术的综合技能。‌本文将带你通过Vue.js和Express.js来实战开发一个完整的电商项目,‌从项目规划到部署上线,‌逐步掌握全栈开发的精髓。‌一、‌项目规划1.‌需求分析‌:‌......
  • Vue3+SpringBoot前端项目实战智慧实验室管理平台
    Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台在当今数字化快速发展的时代,‌智慧实验室管理平台成为提升科研效率、‌优化资源配置的重要工具。‌本文将介绍如何使用Vue3和SpringBoot构建一个功能全面的智慧实验室管理平台,‌涵盖平台的设计思路、‌技术选型、‌核心功......
  • 前端Vue3项目VUE3+TypeScript企业级前端Vue项目
    前端Vue3项目VUE3+TypeScript企业级前端Vue项目‌Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台‌在当今数字化快速发展的时代,‌智慧实验室管理平台的建设成为了提升科研效率与管理水平的关键一环。‌本文将通过一个实战案例,‌详细介绍如何使用Vue3和SpringBoot技术栈构建......
  • 前端Vue项目iHRM人力资源后台管理从Vue模板到整体开发Nginx部署上线
    前端Vue项目iHRM人力资源后台管理:‌从Vue模板到整体开发Nginx部署上线引言随着企业信息化的不断深入,‌人力资源管理系统的自动化和智能化成为企业提升管理效率的重要手段。‌本文将详细介绍一个基于Vue.js开发的人力资源后台管理系统(‌iHRM)‌的完整开发流程,‌包括从Vue模板的选......
  • Vue3源码解析,打造自己的Vue3框架,实现技术深度与思维
    Vue3源码解析与打造自己的Vue3框架:‌技术深度与思维实践引言Vue.js作为当前最流行的前端框架之一,‌其不断迭代和更新推动了前端技术的快速发展。‌Vue3作为Vue.js的下一代主要版本,‌在性能、‌可维护性和开发体验方面进行了重大改进。‌本文将通过对Vue3源码的深入解析,‌探讨......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......
  • Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3
    Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3前言当前基于NodeJs框架的全栈工程实践非常之火,作为一个很长时间未接触代码的前程序猿。一直有点手痒痒,想尝试一下这种全新的编程体验,于是就重新开始了填坑的不归之路。这一套框架是基于现在的前后台分离的指导原则来......
  • TS4+Vite+Vitest+Vitepress Vue3.3 自主打造媲美ElementPlus的组件库
    TS4+Vite+Vitest+VitepressVue3.3自主打造媲美ElementPlus的组件库这个问题看起来是想要创建一个类似ElementPlus的Vue组件库,并且使用TypeScript、Vite、Vitest和Vitepress进行开发。以下是一个简化的指南,用于创建一个自己的Vue组件库项目框架。安装必要的工具:npm......
  • 基于Node.js+vue智慧物流管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着电子商务的蓬勃发展和全球化贸易的日益加深,物流行业作为连接生产与消费的关键环节,其重要性日益凸显。然而,传统物流管理模式面临着效率低下、信息滞后、......