Vue可视化表单设计 FcDesigner v3.1.0 发布,新增 12 个组件,支持事件配置等

FcDesigner 是一款可视化表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。

本项目采用 Vue 和 ElementPlus 进行页面构建,内置多语言解决方案,支持二次扩展开发,支持自定义组件扩展。

兼容 Vue2 和 Vue3 版本
帮助文档 | 在线演示 | 源码下载

3.2.0

  • 增加 12 个可拖拽组件,目前共内置了 36 个可拖拽组件
  • 新增表格布局
  • 新增表格表单组件
  • 增加表单结构预览
  • 增加默认值录入功能
  • 增加表单和组件的事件配置
  • 增加多端预览和操作撤销和重做

img

安装

npm install @form-create/designer@next

引入

CDN:

<link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
<!-- import @form-create/element-ui -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<!-- import @form-create/designer -->
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app"><fc-designer height="100vh" />
</div>
<script>const { createApp } = Vueconst app = createApp({});app.use(formCreate);app.use(FcDesigner);app.mount('#app');
</script>

NodeJs:

shell

npm install @form-create/designer@next

请自行导入 ElementPlus 并挂载

import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-create/designer'
import ELEMENT from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ELEMENT);
app.use(formCreate)
app.use(FcDesigner)

使用

<fc-designer ref="designer" height="100vh" />

组件配置

<fc-designer ref="designer" />
  • locale Object

多语言配置,默认为中文

  • mask boolean

是否显示组件的遮罩,默认为 true,不可以操作组件

  • height string|number

设计器组件的高度

  • menu MenuList

自定义左侧的菜单列表,会覆盖默认的菜单列表

  • config Config

可以配置设计器内模块是否显示和默认规则的修改

  • handle Handle

设计器顶部扩展操作按钮

组件的事件

  • active 组件选中事件,当组件在设计器中被选中时触发

    emit('active', Rule);
    
  • create 组件新增事件,创建新组件时触发

    emit('create', Rule);
    
  • copy 组件复制事件,当组件被复杂时触发

    emit('copy', Rule);
    
  • delete 组件删除事件,当组件在设计器中被删除时触发

    emit('delete', Rule);
    
  • drag组件拖入事件,当拖入新组件时触发

    emit('drag', {dragRule, item});
    
  • inputData录入数据事件, 保存录入数据时出发

    emit('inputData', formData);
    

组件的方法

<fc-designer ref="designer" />

通过refs.designer调用下面的方法

  • 添加模板和拖拽组件的描述文件,并按照menu字段自动添加到对应的菜单下

    type addComponent = (dragRule: dragRule|dragTemplateRule) =>void;
    type addComponent = (dragRule: Array<dragRule|dragTemplateRule>) =>void;
    
  • 覆盖添加拖拽组件到指定的菜单下

    type setMenuItem = (menuName: string, list: MenuList) => void;
    
  • 在设计器左侧添加新的菜单

    type addMenu = (menu: Menu) =>void;
    
  • 设置设计器表单的生成规则

    type setRule = (rule: string|Rule[]) => void;
    
  • 设置设计器表单的表单配置

    type setOption = (opt: Options) => void;
    

    别名方法setOptions

  • 获取设计器表单的渲染规则(Array)

    type getRule = () => Rule[];
    
  • 获取设计器表单的json渲染规则(string)

    type getJson = () => string;
    
  • 获取设计器表单的表单配置(Object)

    type getOption = () => Options;
    

    别名方法getOptions

  • 获取设计器表单的表单的json配置(string)

    type getOptionsJson = () => string;
    
  • 获取表单的formData

    type getFormData: () => Object;
    
  • 设置表单的formData

    type setFormData: (formData: Object) => void;
    
  • 获取设计器的表单的层级规则描述

    type getTree: () => TreeData;
    
  • 获取设计器的表单中表单组件的规则描述

    type getFormTree: () => TreeData;
    
  • 预览表单

    type openPreview = () => void;
    
  • 开启录入数据模式

    type openInputData: (open: boolean) => void;
    
  • 清空设计器的表单

    type clearDragRule = () => void;
    
  • 获取设计器中所有的字段名

    type fields = () => string[];
    
  • 选中设计器中指定组件

    type toolActive = (rule:Rule) => void;
    
  • 清空设计器中组件的选中状态

    type clearActiveRule = () => void;
    
  • 设置表单配置的表单规则,于config.formRule相同

    type setFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
    
  • 设置组件基础配置表单的表单规则,于config.baseRule相同

    type setBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
    
  • 设置组件验证配置表单的表单规则,于config.validateRule相同

    type setValidateRuleConfig = (rule: () => Rule[], append: boolean) => void;
    
  • 设置指定组件属性配置的表单规则,于config.componentRule相同

    type setComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;
    

表单回显

获取设计器表单规则和回显

获取设计表单的数据

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

回显设计表单

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

表单渲染

挂载 form-create, 重要!

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

加载规则并渲染表单

<template><div id="app"><form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create></div>
</template>
<script>import formCreate from '@form-create/element-ui';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/pingmian/23620.shtml

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

相关文章

GBDT的优势:为什么选择梯度提升决策树

GBDT的优势&#xff1a;为什么选择梯度提升决策树 在机器学习的众多算法中&#xff0c;GBDT&#xff08;Gradient Boosting Decision Tree&#xff0c;梯度提升决策树&#xff09;因其在各类回归和分类任务中的卓越表现而备受关注。GBDT不仅在各种竞赛中屡获佳绩&#xff0c;还…

【cmake】cmake cache

cmake cache是什么 cmake cache是cmake在配置好后生成的一个CMakeCache.txt的文件&#xff0c;里面存储了一堆变量&#xff0c;这些变量一般都是关于项目的配置和环境的。 比如你用的什么编译器&#xff0c;编译器选项&#xff0c;还有项目目录。 例如&#xff08;在cmakelist…

前端工程化工具系列(九)—— mddir(v1.1.1):自动生成文件目录结构工具

mddir 是一个基于项目目录结构动态生成 Markdown 格式目录结构的工具&#xff0c;方便开发者在文档中展示文件和文件夹的组织结构。 1. 安装 全局安装改工具&#xff0c;方便用于各个项目。 pnpm i -g mddir2. 使用 在想要生成目录接口的项目内打开命令行工具&#xff0c;输…

算法学习笔记——算法和数据结构简介

算法和数据结构简介 硬计算类算法&#xff1a; 精确求解大厂算法和数据结构笔试、面试题、acm比赛或者和acm形式类似的比赛&#xff0c;考虑的都是硬计算类算法但是某些问题使用硬计算类的算法&#xff0c;可能会让计算的复杂度较高 软计算类算法&#xff1a; 更注重逼近解…

结式的两种定义以及相等证明

【定理】 设 A ( x ) ∑ i 0 m a i x i B ( x ) ∑ i 0 n b i x i ∈ R [ x ] A(x) \sum_{i 0}^{m}{a_{i}x^{i}}\ \ \ \ \ \ \ \ \ \ \ \ \ B(x) \sum_{i 0}^{n}{b_{i}x^{i}}\mathcal{\ \ \ \ \ \ \ \ \ \ \ \ \in \ \ \ \ \ \ \ \ \ \ \ \ \ R}\lbrack x\rbrack A(x)…

CSS中inset属性详细讲解

CSS 中的 inset 属性是一种用于定位和调整非 static 定位元素的缩略属性。它是四个单独属性的简写&#xff0c;这些属性是 top、right、bottom 和 left。通过 inset 属性&#xff0c;可以同时设置这些属性的值&#xff0c;简化代码书写。 1.属性语法 inset 属性的语法如下&am…

太阳能航空障碍灯在航空安全发挥什么作用_鼎跃安全

随着我国经济的快速发展&#xff0c;空域已经成为经济发展的重要领域。航空运输、空中旅游、无人机物流、飞行汽车等经济活动为空域经济发展提供了巨大潜力。然而&#xff0c;空域安全作为空域经济发展的关键因素&#xff0c;受到了广泛关注。 随着空域经济活动的多样化和密集…

探索Sass:Web开发的强大工具

在现代Web开发中,CSS(层叠样式表)作为前端样式设计的核心技术,已经发展得非常成熟。然而,随着Web应用的复杂性不断增加,传统的CSS书写方式逐渐暴露出一些不足之处,如代码冗长、难以维护、缺乏编程功能等。为了解决这些问题,Sass(Syntactically Awesome Stylesheets)应…

VOJ 迷阵突围 题解 次短路径 dijkstra算法

迷阵突围 题目描述 小明陷入了坐标系上的一个迷阵&#xff0c;迷阵上有 n 个点&#xff0c;编号从 1 到 n 。小明在编号为 1 的位置&#xff0c;他想到编号为 n 的位置上。小明当然想尽快到达目的地&#xff0c;但是他觉得最短的路径可能有风险&#xff0c;所以他会选择第二短…

VL27 不重叠序列检测

这里最大的问题是&#xff1a; always (*) 和 always (posedge clk or negedge rst_n)的区别 always (*) 在当前时钟内会变化 always (posedge clk or negedge rst_n)由时钟驱动&#xff0c;所以会在下一个时钟才发生变化 代码 module sequence_detect(input clk,input rst_…

Waymo视角革新!MoST:编码视觉世界,刷新轨迹预测SOTA!

论文标题&#xff1a; MoST: Multi-modality Scene Tokenization for Motion Prediction 论文作者&#xff1a; Norman Mu, Jingwei Ji, Zhenpei Yang, Nate Harada, Haotian Tang, Kan Chen, Charles R. Qi, Runzhou Ge, Kratarth Goel, Zoey Yang, Scott Ettinger, Rami A…

Day34 事件聚合器实现消息过滤功能

​ 当前章节,实现了消息事件过滤功能 在上一章节中,我们发现在Login视图页和Main视图页都使用了同一个事件聚合器,导致在Login视图页发送的消息也被Main 视图主页所接收,这违反了事件传递的意图和模块化设计的原则。为了解决这个问题,我们需要为事件聚合器引入消息过滤的…

锁存器(Latch)的产生与特点

Latch 是什么 Latch 其实就是锁存器&#xff0c;是一种在异步电路系统中&#xff0c;对输入信号电平敏感的单元&#xff0c;用来存储信息。锁存器在数据未锁存时&#xff0c;输出端的信号随输入信号变化&#xff0c;就像信号通过一个缓冲器&#xff0c;一旦锁存信号有效&#…

深入解析Java中volatile关键字

前言 我们都听说过volatile关键字&#xff0c;也许大家都知道它在Java多线程编程编程中可以减少很多的线程安全问题&#xff0c;但是会用或者用好volatile关键字的开发者可能少之又少&#xff0c;包括我自己。通常在遇到同步问题时&#xff0c;首先想到的一定是加锁&#xff0…

大模型押题高考语文作文,带着大模型参加语文高考会怎么样?

前沿 大语言模型通常是指那些经过大量数据训练,能够理解和生成自然语言文本的人工智能系统。这些模型通常具有数百万到数十亿个参数,能够执行多种语言任务,例如语言翻译、文本摘要、问答系统、文本生成等。大语言模型能够捕捉语言的复杂性和细微差别,提供更加准确和自然的…

21data 数据可视化

echarts 快速上手 - 使用手册 - Apache ECharts 概念篇 图表容器及大小样式数据集数据转换坐标轴视觉映射图例 应用篇 常用图表类型 标签 python画图-matplotlib 21data 数据可视化 代码合集-CSDN博客 折线图 柱状图 雷达图 条形图 气泡图 折线堆积图 簇状柱形图

移动web性能测试工具有哪些呢?

摘要&#xff1a;本文将介绍一系列移动Web性能测试工具&#xff0c;以帮助开发人员评估和优化移动网站和应用程序的性能。我们将从基本概念开始&#xff0c;逐步深入&#xff0c;详细介绍每种工具的特点、用途和使用方法。 1. 概述 1.1 移动Web性能测试的重要性 1.2 测试工具…

微信小程序-wx.showToast超长文字展示不全

wx.showToast超长文字展示不全 问题解决方法1 问题 根据官方文档&#xff0c;iconnone&#xff0c;最多显示两行文字。所以如果提示信息较多&#xff0c;超过两行&#xff0c;就需要用其他方式解决。 解决方法1 使用vant组件里面的tost 根据官方例子使用&#xff1a; 1、在…

【Python报错】已解决ModuleNotFoundError: No module named ‘packaging’

成功解决“ModuleNotFoundError: No module named ‘packaging’”错误的全面指南 在Python编程中&#xff0c;遇到ModuleNotFoundError: No module named packaging这样的错误&#xff0c;通常意味着你的Python环境中缺少名为packaging的模块&#xff0c;或者该模块没有被正确…

YOLOV5 图像分割:利用yolov5进行图像分割

1、介绍 本章将介绍yolov5的分割部分,其他的yolov5分类、检测项目参考之前的博文 分类:YOLOV5 分类:利用yolov5进行图像分类_yolov5 图像分类-CSDN博客 检测:YOLOV5 初体验:简单猫和老鼠数据集模型训练-CSDN博客 yolov5的分割和常规的分割项目有所区别,这里分割的结果…