使用开源的 Vue 移动端表单设计器创建表单

FcDesigner Vant 版是一款基于 Vue3.0 的移动端低代码可视化表单设计器工具,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。

源码下载 | 演示地址 | 帮助文档


本项目采用 Vue3.0 和 ElementPlus 进行移动端页面构建,移动端使用的是 vant4.0 版本,内置多语言解决方案,支持二次扩展开发,支持自定义组件扩展。

  • 内置中英文语言,轻松应对全球化需求。

  • 提供 32 种常用组件,覆盖多种场景,满足多样化需求。

  • 支持灵活扩展自定义组件,满足个性化需求。

  • 支持二次扩展开发,满足深度定制需求。

  • 完美兼容 PC 端功能:表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。

安装​

首先,安装 @form-create/vant-designer

npm install @form-create/vant-designer@^3

引入​

CDN 引入

如果您选择使用 CDN,可以按照以下步骤在 HTML 文件中引入相关依赖:

<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app"><fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>const { createApp } = Vue;const app = createApp({});app.use(ElementPlus);app.use(vant);app.use(FcDesignerMobile);app.use(FcDesignerMobile.formCreate);app.mount('#app');
</script>

Node.js 引入

对于使用 Node.js 的项目,按照以下步骤在您的 Vue 3 项目中引入并配置:

import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 挂载应用
app.mount('#app');

使用​

在 Vue 3 组件中,您可以通过以下方式使用 fc-designer 组件:

<template><fc-designer-mobile ref="designer" height="100vh" />
</template>
<script setup>import { ref } from 'vue';// 可以在此处获取设计器实例或进行其他操作const designer = ref(null);
</script>

组件配置​

使用 fc-designer-mobile 组件来实现表单设计器。以下是各配置项的详细说明:

<fc-designer ref="designer" :locale="locale" height="100vh"/>
  • locale Object

多语言配置对象。默认为中文。通过设置此属性,可以切换到其他语言的界面文本。

  • mask boolean

是否显示组件遮罩层。默认为 true,此时用户无法操作组件。设置为 false 可以让用户直接操作设计器中的组件。

  • height string|number

设计器组件的高度。可以使用字符串(如 500px100vh)或数字(如 500)。指定设计器的显示高度。

  • menu MenuList

自定义左侧菜单列表。此配置会覆盖设计器的默认菜单列表。MenuList 应包含你希望在设计器左侧显示的菜单项。

  • config Config

配置设计器内的模块显示状态和默认规则。通过此配置,可以控制哪些模块可见,以及修改默认设置。

  • handle Handle

设计器顶部的扩展操作按钮。Handle 是一个包含按钮名称和回调函数的数组。通过此配置,可以添加自定义操作按钮并指定其行为。

表单渲染​

确保在使用 formCreateMobile 和 FcDesignerMobile 进行表单设计和回显时,正确地处理 JSON 数据格式是至关重要的。以下文档详细介绍了如何获取、回显、渲染表单。

必须使用 formCreate.parseJson 和 formCreate.toJson 方法来转换 JSON 数据,以确保数据格式正确。

获取设计表单的数据​

在表单设计器中,可以通过以下方法获取表单的生成规则和配置,这些数据通常会被保存到数据库中,以便后续加载和回显。

//获取表单的生成规则
const ruleJson = this.$refs.designer.getJson();
//获取表单的配置
const optionsJson = this.$refs.designer.getOptionsJson();//todo 保存JSON数据到数据库中

这些数据可以用来保存到数据库中,确保表单的状态和配置可以在页面刷新或重新加载时恢复。

回显设计表单​

当需要回显设计好的表单时,您需要加载之前保存的 JSON 规则和配置,并将其应用到设计器中。

//todo 加载表单JSON规则//回显表单
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

通过这些方法,可以将之前保存的表单规则和配置应用到设计器中,从而恢复表单的状态。

表单渲染​

要渲染表单,您需要挂载 form-create 到 Vue 应用中,并加载表单规则和配置。

//从设计器中导入 formCreate
import {formCreate} from '@form-create/vant-designer';
//挂载 formCreate
app.use(formCreate);

表单渲染示例

<template><div id="app"><form-create-mobile v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create></div>
</template>
<script>import {formCreate} from '@form-create/vant-designer';export default {data() {return {//实例对象fApi: {},//表单数据formData: {},//表单生成规则rule: [],//组件参数配置option: {}}},beforeCreate(){const rule,option;// todo 加载表单JSON规则this.rule = formCreate.parseJson(rule);this.option = formCreate.parseJson(option);}}
</script>

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

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

相关文章

HCIP open-Euler学习文档

第一期 操作系统基础&#xff0c;web基础 OpenEuler 目录 学习系统常用应用(Apache Nginx DNS MySQL)服务器集群架构(HAProxy, Nginx, LVS,keepalived)存储管理(GlusterFS,NAS,SAN)自动化基础(Ansible,SaltStack)Shell脚本基础(变量&#xff0c;语法&#xff0c;函数&…

Spring实现3种异步流式接口,解决接口超时烦恼

在现代Web开发中&#xff0c;接口超时是一个常见的问题&#xff0c;尤其是在处理耗时操作时。传统的同步接口在处理长时间任务时会阻塞请求线程&#xff0c;从而影响系统的响应能力。Spring框架提供了多种工具来支持异步流式接口&#xff0c;从而有效地解决这一问题。本文将详细…

使用fpm工具制作Vim.rpm包

背景&#xff1a;生产环境中的CentOS 7在安全扫描中被扫描出vim存在堆缓冲区溢出&#xff08;CVE-2024-45306&#xff09;等漏洞。根据漏洞说明&#xff0c;需要升级到最新版。 奈何CentOS 7已经停止维护了&#xff0c;所以&#xff0c;想在网上找一个最新版的vim.rpm相当不容易…

腾讯云宝塔面板前后端项目发版

后端发版 1. 打开“网站”页面&#xff0c;找到java项目&#xff0c;点击状态暂停服务 2.打开“文件”页面&#xff0c;进入jar包目录&#xff0c;删除原有的jar包&#xff0c;上传新jar包 3. 再回到第一步中的网站页面&#xff0c;找到jar项目&#xff0c;启动项目即可 前端发…

跨境业务收款难?Zoho Books来帮忙

外贸跨境企业应收账款管理繁琐&#xff0c;ZohoBooks财务管理软件提供自动化解决方案&#xff0c;简化开票、跟进、收款和账户更新流程&#xff0c;提升效率和准确性&#xff0c;助力企业优化现金流和财务健康。 什么是应收账款&#xff1f; 应收账款指的是企业在提供商品或服…

王爽汇编语言第三版实验1

前言 本系列的文章是对王爽老师的汇编语言中的实验的解答记录&#xff0c;原书一共有17个实验&#xff0c;由于学校的教学流程只做到了第14个实验&#xff0c;因此本文章只会有前十四个实验的解答记录,还有个比较重要的是&#xff0c;文章中会有原书实验中没有的题目&#xff…

汇总10个AI免费一键生成PPT的网站

一、前言 PPT幻灯片是现代办公和学习中的重要组成部分。它在工作、研究或培训中扮演着重要角色&#xff0c;并能够让观众更好地理解信息。随着当今人工智能技术的快速发展&#xff0c;现在有很多免费的AI PPT生成器可供选择&#xff0c;帮助用户更加便捷地制作出高效且具有较强…

rhce:列行性(at和cron)

配置 at练习 设置时间提醒 定义一分钟后显示命令&#xff0c;使用atq查看 cron练习 配置 systemctl status crond 查看文件所在位置 ll /var/spool/cron/ 主要功能 开始操作 进入界面操作每天早上9点说hello crontab -e 五个星号分别代表分时日月周&#xff0c;其次是执…

Elasticsearch的X-Pack 详细简介

Elasticsearch的X-Pack是一个功能丰富的扩展包&#xff0c;它集成了多种便捷功能&#xff0c;旨在提升Elasticsearch的使用体验和安全性。 一、X-Pack的核心功能 X-Pack为Elastic Stack&#xff08;包括Elasticsearch、Kibana、Beats和Logstash&#xff09;提供了以下核心功能…

SpringBoot中异步操作的深度解析与实践指南

在开发中&#xff0c;优化接口响应速度是一个重要的性能考量。异步操作是一种有效的方法&#xff0c;可以在不阻塞主线程的情况下执行耗时的任务&#xff0c;从而提高接口的响应速度。以下是一些关于异步操作适用场景以及如何在SpringBoot中实现异步方法的详细介绍。 异步操作…

光通信——前传基本架构

一、前传基本架构 第三代移动通信技术引入了分布式射频接入网络&#xff08;Distributed Radio Access Network &#xff0c; D-RAN&#xff09;架构。在此架构中的的基带处理单元&#xff08; Baseband Unit &#xff0c; BBU&#xff09; 和 射频拉远单元&#xff08; Remot…

Kafka-初识

一、Kafka是什么&#xff1f; Kafka是一个高度可扩展、弹性、容错和安全的分布式流处理平台&#xff0c;由服务器和客户端组成&#xff0c;通过高性能TCP网络协议进行通信。它可以像消息队列一样生产和消费数据。可以部署在裸机硬件、虚拟机和容器上&#xff0c;也可以部署在本…

[图形学]蒙特卡洛积分方法介绍及其方差计算

一、简介 本文介绍了蒙特卡洛积分算法的基本原理和其误差计算。 二、蒙特卡洛积分介绍 1. 介绍 蒙特卡洛积分算法是一种数值积分算法&#xff0c;用于对复杂函数进行积分。 例如&#xff0c;对于目标积分函数&#xff1a; ∫ a b f ( x ) d x (1) \int_{a}^{b}f(x)\rm{d}x…

【MySQL】提高篇—索引与性能优化:索引的概念与类型(单列索引、复合索引、全文索引)

在关系数据库中&#xff0c;当表中的数据量增大时&#xff0c;查询性能可能会显著下降。为了提高数据检索的效率&#xff0c;数据库系统提供了索引的概念。 索引类似于书籍的目录&#xff0c;可以快速定位到特定的数据行&#xff0c;从而加快查询速度。 索引的使用在实际应用…

springboot034在线商城系统设计与开发-代码(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;ONLY在线商城系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本ONLY在线商城系统…

Dubbo 序列化方式

Hession 这是dubbo的默认序列化协议&#xff0c;是一种二进制协议&#xff0c;他的特点是序列化的速度比较快&#xff0c;并且序列化的数据体积比较小。Hession适合于大部分场景&#xff0c;因此被选为dubbo的默认序列化协议。 Json Json是一种基于文本的序列化方式&#xf…

python+Mosh网课笔记02

太久没写python代码了&#xff0c;学机器学习重新拾起python&#xff0c;笔记比较简陋。 参考&#xff1a;mosh的python教程 目录 一、控制流 二、函数functions 三、数据结构 list stack queue tuple swapping variables array sets dictionary 解包 一、控制流…

机械臂力控方法概述(一)

目录 1. MoveIt 适用范围 2. 力控制框架与 MoveIt 的区别 3. 力控方法 3.1 直接力控制 (Direct Force Control) 3.2 间接力控制 (Indirect Force Control) 3.2.1 柔顺控制 (Compliant Control) 3.2.2 阻抗控制 (Impedance Control) 3.2.3 导纳控制 (Admittance Control…

Wordpress—一个神奇的个人博客搭建框架

wordpress简介 在当今数字化的时代&#xff0c;拥有一个属于自己的个人博客&#xff0c;不仅可以记录生活点滴、分享专业知识&#xff0c;还能展示个人风采。而在众多的博客搭建框架中&#xff0c;Wordpress 以其强大的功能和灵活性脱颖而出。今天&#xff0c;就让我们一起深入…

【秋招笔试】10.13拼多多(已改编)秋招-三语言题解

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 大厂实习经历 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍒 本专栏已收集…