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,一经查实,立即删除!

相关文章

【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;输…

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

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

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…

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

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

深入解析Java中volatile关键字

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

移动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的分割和常规的分割项目有所区别,这里分割的结果…

网络编程(UPD和TCP)

//发送数据 //UDP协议发送数据 package com.example.mysocketnet.a02UDPdemo;import java.io.IOException; import java.net.*;public class SendMessageDemo {public static void main(String[] args) throws IOException {//发送数据//1.创建DatagramSocket对象(快递公司)//…

【Linux】线程安全的艺术:解锁互斥量在并发编程中的应用

文章目录 前言&#xff1a;1. 进程线程间的互斥相关背景概念1.1. 操作共享变量会有问题的售票系统代码&#xff1a; 2. 互斥量的接口2.1. 解决方案2.1.1. 使用全局的锁&#xff1a;2.1.2. 使用局部的锁&#xff1a;2.1.3. 封装为RAII风格的加锁和解锁&#xff1a;2.1.4. C 11 中…

Liunx音频

一. echo -e "\a" echo 通过向控制台喇叭设备发送字符来发声&#xff1a; echo -e "\a"&#xff08;这里的 -e 选项允许解释反斜杠转义的字符&#xff0c;而 \a 是一个响铃(bell)字符&#xff09; 二. beep 下载对应的包 yum -y install beep 发声命令 be…

YashanDB携手宏杉科技助力国产软件生态发展

近日&#xff0c;深圳计算科学研究院崖山数据库系统YashanDB与宏杉科技系列存储、系列服务器与数据库一体机等多款产品顺利完成兼容性互认证。经严格测试&#xff0c;双方产品完全兼容&#xff0c;稳定运行&#xff0c;共同提供高效、稳定、安全的国产软硬件一体化解决方案&…

《精通ChatGPT:从入门到大师的Prompt指南》大纲目录

第一部分&#xff1a;入门指南 第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 1.2 ChatGPT的应用领域 1.3 为什么需要了解Prompt 第2章&#xff1a;Prompt的基本概念 2.1 什么是Prompt 2.2 好Prompt的特征 2.3 常见的Prompt类型 第二部分&#xff1a;Prompt设计技巧 第…

解决 iOS 端小程序「saveVideoToPhotosAlbum:fail invalid video」问题

场景复现&#xff1a; const url https://mobvoi-digitalhuman-video-public.weta365.com/1788148372310446080.mp4uni.downloadFile({url,success: (res) > {uni.saveVideoToPhotosAlbum({filePath: res.tempFilePath,success: (res) > {console.log("res > &…

数学题目系列(一)|丑数|各位和|埃氏筛|欧拉筛

一.丑数 链接&#xff1a;丑数 分析&#xff1a; 丑数只有2&#xff0c;3&#xff0c;5这三个质因数&#xff0c;num 2a 3b 5c也就是一个丑数是由若干个2&#xff0c;3&#xff0c;5组成&#xff0c;那么丑数除以这若干个数字最后一定变为1 代码 class Solution {publi…

NocoDB开源的智能表格详解-腾讯文档本地替代品

文章目录 一、介绍二、docker-compose部署三、登录NocoDB四、NocoDB手册1. 创建项目2. 收集统计表2.1 添加字段2.2 编辑字段2.3 字段类型2.4 发布表格 3.创建表单3.1 创建表单3.2 分享表单3.3 填写检测单 4.创建看板5.创建画廊 一、介绍 可作为腾讯文档的本地电子表格替代品&a…

C# BindingSource 未完

数据绑定导航事件数据验证自定义示例示例总结 在 C#中&#xff0c; BindingSource 是一个非常有用的控件&#xff0c;它提供了数据绑定的基础设施。 BindingSource 允许开发者将数据源&#xff08;如数据库、集合、对象等&#xff09;与用户界面控件&#xff08;如文本框、下…

5G+北斗智能手持终端在哪些行业中发挥作用

在当今科技融合发展的浪潮中&#xff0c;5G北斗智能手持终端正逐步成为驱动各行各业智能化升级的关键力量。这一融合创新技术不仅重塑了传统的通信与定位方式&#xff0c;而且在多个核心领域展现了其变革性的应用价值。 5G北斗智能手持终端因其独特的技术组合&#xff0c;在多个…