Vue移动端动态表单生成组件

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

帮助文档 | 源码下载 

FormCreate 3.2 版适配了当前流行的vant4.0版本,不仅能帮助您在移动端开发过程中节省大量时间和精力,还能有效提升用户体验和满意度。

form-create 图例

特性

  • 使用JSON数据生成表单
  • 支持扩展,生成任何Vue组件和HTML标签
  • 支持6个UI框架
  • 支持组件之间联动
  • 提供丰富的表单操作API
  • 支持子表单和分组
  • 高性能
  • 适配移动端

内置组件

  • 输入框
  • 数字输入框
  • 日历选择
  • 日期选择
  • 时间选择
  • 单选框
  • 多选框
  • 下拉选择框
  • 开关
  • 评分
  • 滑块
  • 上传
  • 分组
  • 子表单

除了适配vant以外还适配以下UI框架

  • element-plus
  • ant-design-vue
  • naive-ui
  • arco-design
  • tdesign

使用​

浏览器​

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"/><!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script><!-- 引入 formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/vant/form-create.min.js"></script>
<!-- 挂载组件 -->
<script >const app = Vue.createApp({});app.use(vant);app.use(formCreateMobile);app.mount('#app');
</script>

NPM

安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i @form-create/vant@^3

引入

import formCreateMobile from '@form-create/vant'

挂载

app.use(formCreateMobile)

创建表单

<template><form-create-mobile :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},]}]}}
}
</script>

1. FormCreate 官网:FormCreate-动态表单
2. 帮助文档:安装 | FormCreate
3. 体验地址:FcDesigner Pro在线演示
4. 移动端表单设计器:FcDesigner Mobile在线演示

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库系统概论(第5版教材)

第一章 绪论 1、数据(Data)是描述事物的符号记录&#xff1b; 2、数据库系统的构成&#xff1a;数据库 、数据库管理系统&#xff08;及其开发工具&#xff09; 、应用程序和数据库管理员&#xff1b; 3、数据库是长期存储在计算机内、有组织、可共享的大量数据的集合&…

【Linux】线程Thread

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ ​ 线程概述 …

【C语言】解决C语言报错:Double Free

文章目录 简介什么是Double FreeDouble Free的常见原因如何检测和调试Double Free解决Double Free的最佳实践详细实例解析示例1&#xff1a;重复调用free函数示例2&#xff1a;多次释放全局变量指针示例3&#xff1a;函数间传递和释放指针 进一步阅读和参考资料总结 简介 Doub…

nuget 包修改默认存放路径

平时使用 nuget packages 时&#xff0c;都是下载包文件到本地。 默认是在C盘&#xff0c;时间一久容量会高达几十个G&#xff0c;这样会拖慢系统运行效率。 这时需要修改包的下载位置。 打开nuget 包配置文件&#xff1a;Nuget.config 路径在 C:\Users\{UserName}\AppData…

网约车停运损失费:2、协商过程

目录 &#x1f345;点击这里查看所有博文 随着自己工作的进行&#xff0c;接触到的技术栈也越来越多。给我一个很直观的感受就是&#xff0c;某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了&#xff0c;只有经常会用到的东西才有可能真正记…

鸿蒙开发Ability Kit(程序框架服务):【FA模型切换Stage模型指导】 配置文件差异

配置文件的差异 FA模型应用在[config.json文件]中描述应用的基本信息&#xff0c;一个应用工程中可以创建多个Module&#xff0c;每个Module中都有一份config.json文件。config.json由app、deviceConfig和module三部分组成&#xff0c;app标签用于配置应用级别的属性&#xff…

探索 JQuery EasyUI:构建简单易用的前端页面

介绍 当我们站在网页开发的浩瀚世界中&#xff0c;眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中&#xff0c;JQuery EasyUI 如一位指路明灯&#xff0c;为我们提供了一条清晰的航线。 1.1 什么是 JQuery EasyUI&#xff1f; JQuery EasyUI&#xff0c;简单来…

从写下第1个脚本到年薪40W,我的测试开发心路历程!

对于任何职业来说&#xff0c;薪资始终都会是众多追求的重要部分。前几年测试行业还是风口&#xff0c;但是随着不断新鲜血液的加入&#xff0c;再加上就业大环境不好&#xff0c;企业也都在“降本增效”。目前内卷也是越来越激烈。不得不承认当下的现状&#xff0c;已经不仅仅…

Cadence计算器函数leafValue

与getData结合使用 leafValue( getData(“/output” ?result “dc”) 转自eetop https://bbs.eetop.cn/thread-931912-1-1.html

DM达梦数据库数学函数整理

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

期货交易记录20240626

文章目录 期货交易系统构建第一步、选品第二步、心态历练第三步、开仓纪律第四步、持仓纪律第五步、接下来的计划 2024年6月26号&#xff0c;开始写期货交易的第四篇日记。 交易记录&#xff1a;做了一笔纯碱的多单&#xff0c;在回撤了400个点左右后&#xff0c;看到企稳信号后…

记录正则提取文章

收到了个word版的电子书&#xff0c;需要拆分并转换为md存储到数据库中&#xff0c;便于搜索&#xff0c;记录下用正则提取文章的过程 word原文中有目录&#xff0c;可提取出目录后&#xff0c;在正文中根据目录来正则提取文章 正则的多行匹配 在匹配大量文章的时候&#xff…

Power BI 占比函数

1&#xff0c;普通层级结构占比 占比1 DIVIDE([sum_qty], CALCULATE([sum_qty],ALLSELECTED(Item[ITEM_CODE]))) //按照line为一个整理展示数据占比2 SWITCH( true(),ISINSCOPE(Item[ITEM_CODE]),DIVIDE([sum_qty], CALCULATE([sum_qty],ALLSELECTED(Item[ITEM_CODE]))), IS…

石油化工厂为什么要用专业防爆手机?

防爆手机之所以必须使用专业设计的产品&#xff0c;主要是出于安全考虑&#xff0c;以防止在易燃易爆环境中因手机使用不当引发爆炸事故。以下几点详细解释了使用专业化工防爆手机的必要性&#xff1a; 本质安全设计&#xff1a;顶坚专业防爆手机采用了本质安全&#xff08;本安…

植物大战僵尸杂交版技巧大全(附下载攻略)

《植物大战僵尸杂交版》为策略游戏爱好者带来了全新的挑战和乐趣。如果你是新手玩家&#xff0c;可能会对游戏中的植物和僵尸感到困惑。以下是一些实用的技巧&#xff0c;帮助你快速掌握游戏并享受其中的乐趣。 技巧一&#xff1a;熟悉基本玩法 游戏的基本玩法与原版相似&…

Java学习笔记(多线程):CompetableFuture

本文是自己的学习笔记&#xff0c;主要参考资料如下 https://www.cnblogs.com/dolphin0520/p/3920407.html JavaSE文档 https://blog.csdn.net/ThinkWon/article/details/102508721 1、Overview2、重要参数3、主要方法3.1、创建实例&#xff0c;获取返回值3.2、线程执行顺序相关…

Linux系统安装Lua语言及Lua外部库

安装Lua Lua语言是一种轻量级、高效且可扩展的脚本语言&#xff0c;具有简洁易学的语法和占用资源少的特点。它支持动态类型&#xff0c;提供了丰富的表达式和运算符&#xff0c;同时具备自动垃圾回收机制和跨平台性。Lua语言易于嵌入到其他应用程序中&#xff0c;并可与其他语…

查询DBA_TEMP_FILES报错,删除临时表空间报错ORA-60100

SYMPTOMS 查询DBA_TEMP_FILES报错如下图 ORA-01157: cannotidentify/ock data fle 201 -see DBWR trace fle ORA-01110: data fle 20 1: D:APPADMINISTRATORIORADATA MARTIDATAFILE 01157,00000-"cannotidentify/ock data fle %s -see DBWR trace fle"*Cause: The b…

安卓免费短剧大全v1.0.2/全部无需VIP实时更新全平台短剧

在当今社会&#xff0c;时间成为了许多人最为宝贵的资源。忙碌的工作与繁重的日常事务&#xff0c;常常让我们难以拨出时间沉浸于长篇大幅的影视作品中。对于那些热爱剧情、渴望在生活中点缀一抹戏剧色彩的朋友们而言&#xff0c;这无疑是一种挑战。 然而&#xff0c;随着免费…

高通安卓12-在源码中查找应用的方法

1.通过搜索命令查找app 一般情况下&#xff0c;UI上看到的APP名称会在xml文件里面定义出来&#xff0c;如 搜索名字为WiGig的一个APP 执行命令 sgrep "WiGig" 2>&1|tee 1.log 将所有的搜索到的内容打印到log里面 Log里面会有一段内容 在它的前面是这段内…