当前位置: 首页 > news >正文

为摸鱼助力:一份Vue3的生成式ElementPlus表单组件

目录

一、实现背景

二、简介

三、组织架构设计 

四、实现方式

五、代码示例

六、示例代码效果预览

七、项目预览地址 & 项目源码地址

目前项目还有诸多待完善的地方,大家有好的想法、建议、意见等欢迎再次评论,或于github提交Issues


一、实现背景

        一切为了摸鱼而努力!!!

        在现代Web应用程序中,表单组件是不可或缺的一部分。但是,手动创建每个表单项是一个非常繁琐的过程。为此,我提供了一个基于Vue3的可配置的表单组件,帮助您快速构建表单,无需手动编写HTML或JavaScript代码。这篇文章将向您展示如何使用JSON配置文件一站式生成Vue3 Form表单组件,并在项目中使用它。

二、简介

        此表单组件是目前内嵌在一个基础项目中的,并没有作单独的npm包进行发布,因为目前是一个比较简单且基础的版本,需要优化的点还非常多。希望大家能多多提出宝贵的意见或建议,本文主要是针对实现思路等进行描述。

        目前实现功能:栅格化布局、监听单个表单数据变化、Form 表单除upload外的所有子组件。

        通过JSON配置一站式生成form表单,该组件保留了ElementPlus全部的使用习惯和使用方式,对ElementPlus原功能进行了完美的保留,支持所有属性设置(方法使用统一事件监听替代)

三、组织架构设计 

        在当前的表单组件中,数据层、UI层、事件层等模块相互独立,通过交互来协调和通信。

        其中,数据层负责存储和管理表单组件的数据;UI层负责渲染表单组件的外观;事件层负责处理用户与表单组件互动时的事件。通过这种方式,我们实现了一个高度可扩展和可重用的表单组件。

四、实现方式

        Vue3支持使用JSX/TSX语法,通过JSX/TSX(我这里使用的是TSX)进行不同表单组件的生成,枚举出Form表单的所有子组件。这里采用TSX的方式可以避免每一种组件都要去写一份Vue文件;

        通过匹配组件类型,生成对应的每一个表单组件;

        为保留ElementPlus组件所有属性,需要采用透传的方式,去列出每一个组件所可能用到的属性显然是不明智的;

        布局排版的生成采用el-row、el-col实现栅格布局,可通过配置进行动态调整;

        ElementPlus表单组件中的所有方法显然不是那么好处理的,因此使用同一个方法去监听每个表单项的变化,并提供给“用户”此时变化的key、newVal以及oldVal,这里采用Proxy进行了数据拦截;

        提供一个表单校验和重置表单数据的方法。

        某些ElementPlus表单组件中会提供一些插槽给用户使用,因此这些插槽也需要保留下来

组件生成示例:

case 'el-input':return (<ElInputtype={elItem.specificType}{...elItem.bindObj}v-model={formData[elItem.key]}v-slots={itemInteriorSlotsObject}/>)

五、代码示例

  • 配置项数据
const FormConfig = reactive({rowConfigBind: {gutter: 20,colSpan: 8// className: 'row-class'},formConfigBind: {labelPosition: 'top'},colsList: [{label: '一个普通的输入框',colSpan: 8,type: 'el-input',specificType: 'text',bindObj: {placeholder: '请输入文字',formatter: (value: any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),parser: (value: any) => value.replace(/\$\s?|(,*)/g, '')},key: 'name'},{label: '一个普通的输入框',htmlLabel:'<span class="customize-label-style">\n' +'            自定义tooltip效果\n' +'                <span class="tip-content-wrap">\n' +'                      <span class="tip-content">这是自己定义的tooltip</span>\n' +'                      <span class="triangle-style"></span>\n' +'                </span>\n' +'\n' +'        </span>\n',colSpan: 8,type: 'el-input',specificType: 'text',bindObj: {placeholder: '请输入文字',formatter: (value: any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),parser: (value: any) => value.replace(/\$\s?|(,*)/g, '')},key: 'name2'},{label: '添加了append文字的输入框',colSpan: 8,type: 'el-input',bindObj: {placeholder: '请输入'},rules: [{required: true,message: '请输入',trigger: 'change'}],slots: [{name: 'append',content: '.com'}],key: 'comAdress'},{label: '添加了append JSX组件的输入框',colSpan: 8,type: 'el-input',bindObj: {placeholder: '请输入'},slots: [{name: 'append',content: TestTSXComp}],key: 'appendJSXComp'},{label: '添加了append Vue组件的输入框',colSpan: 8,type: 'el-input',bindObj: {placeholder: '请输入'},slots: [{name: 'append',content: TestVueComp}],key: 'appendVueComp'},{label: '数字输入框',colSpan: 4,type: 'el-input-number',bindObj: {placeholder: '请输入'},key: 'inputNumberVal'},{label: '测试表单生成函数',type: 'slots',key: 'content',colSpan: 24},{label: '下拉选',colSpan: 8,type: 'el-select',bindObj: {placeholder: '请选择',multiple: true},options: [{label: '第一个选项',value: 'A',bindObj: {disabled: true}},{label: '第二个选项',value: 'B'},{label: '第三个选项',value: 'C'}],key: 'optionValue'},{label: '单选框',colSpan: 8,type: 'el-radio',options: [{label: '第一个选项',value: 'A',bindObj: {disabled: true}},{label: '第二个选项',value: 'B'},{label: '第三个选项',value: 'C'}],key: 'radioValue'},{label: '按钮单选框',colSpan: 8,type: 'el-radio',bindObj: {textColor: 'red'},options: [{label: '第一个选项',value: 'A',isButton: true},{label: '第二个选项',value: 'B',isButton: true},{label: '第三个选项',value: 'C',isButton: true // 如果是button样式展示,那么设置此属性为true}],key: 'radioBtnValue'},{label: '自动补全输入框',colSpan: 8,type: 'el-autocomplete',bindObj: {},querySearchFun: querySearchFun,key: 'autocompleteValue'},{label: '日期选择框',colSpan: 8,type: 'el-date-picker',specificType: 'date',bindObj: {},key: 'detePickerValue'},{label: '日期时间选择框',colSpan: 8,type: 'el-date-picker',specificType: 'datetime',bindObj: {},key: 'deteTimePickerValue'},{label: '评分',colSpan: 8,type: 'el-rate',bindObj: {voidIcon: 'ChatRound',colors: ['#409eff', '#67c23a', '#FF9900'],icons: [ChatRound, ChatLineRound, ChatDotRound]},key: 'rateValue'},{label: '滑块',colSpan: 8,type: 'el-slider',bindObj: {showInput: true},key: 'elSliderValue'},{label: '开关',colSpan: 8,type: 'el-switch',bindObj: {style: '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949'},key: 'elSwitchValue'},{label: '时间选择器',colSpan: 4,type: 'el-time-picker',key: 'timePickerValue'},{label: '时间选择',colSpan: 4,type: 'el-time-select',key: 'timeSelectValue'}]
})
  • 表单数据
// 数据定义
const formData = reactive({name: '',comAdress: '',inputNumberVal: '',appendJSXComp: '',appendVueComp: '',optionValue: [],autocompleteValue: ''
})
  • 组件应用
<GenerateElFormref="formInstance":form-config="FormConfig":form-data="formData"@updateFormValue="watcherFun"
><template #content><div class="form-slot-one">这是插槽的内容</div></template>
</GenerateElForm>
  •  watcherFun
// 监听数据变化的方法
const watcherFun = (key: string, oldVal: any, newVal: any) => {console.log('监听到数据变化',`当前变化的key是: ${key}, 它的旧值是: ${oldVal}, 它的新值是: ${newVal}`)
}

六、示例代码效果预览

七、项目预览地址 & 项目源码地址

项目预览地址:http://1.14.75.249/

项目源码地址:https://github.com/zuotiandeni/lcyBlog

目前项目还有诸多待完善的地方,大家有好的想法、建议、意见等欢迎再次评论,或于github提交Issues

相关文章:

为摸鱼助力:一份Vue3的生成式ElementPlus表单组件

目录 一、实现背景 二、简介 三、组织架构设计 四、实现方式 五、代码示例 六、示例代码效果预览 七、项目预览地址 & 项目源码地址 目前项目还有诸多待完善的地方&#xff0c;大家有好的想法、建议、意见等欢迎再次评论&#xff0c;或于github提交Issues 一、实现…...

数通工作中常见问题与解决方法

城域网&#xff0c;硬件&#xff0c;交换机开局 1、环路产生&#xff0c;现象&#xff0c;怎么解决 一般是物理拓扑存在环路&#xff0c;导致数据互传&#xff0c;Mac地址漂移&#xff0c;产生环路&#xff1b; Cpu利用率变高&#xff0c;端口流量接近100%&#xff0c;有mac…...

基于STM32+华为云IOT设计的智能浇花系统

一、前言 随着社会的不断发展和人们生活水平的逐渐提高,人们逐渐追求高质量的生活,很多人都会选择在家里或办公室种植一些花卉以净化家庭空气,陶冶情操,但是很多人忙于工作、学习、出差、旅游或者一些其他的原因,不能及时地对花卉进行照料,短时间内导致很多花卉因缺水分…...

回调函数(callback)是什么?

通俗易懂 你到一个商店买东西&#xff0c;刚好你要的东西没有货&#xff0c;于是你在店员那里留下了你的电话&#xff0c;过了几天店里有货了&#xff0c;店员就打了你的电话&#xff0c;然后你接到电话后就到店里去取了货。 在这个例子里&#xff0c;你的电话号码就叫回调函…...

零代码量化投资:用ChatGPT获取新浪财经上的股票实时行情

现在很多免费的股票数据库&#xff0c;比如akshare&#xff0c;其实是从新浪财经或者东方财富网站上爬取下来的。如果能直接从新浪财经或者东方财富网站上爬取数据&#xff0c;可以获取更全面更即时的信息。 可以在ChatGPT中输入提示词如下&#xff1a; 写一段Python代码&…...

从GitLab拉取并运行项目

从GitLab拉取并运行项目 序Git项目运行运行报错 总结教训 序 搭建好前端基础环境后&#xff0c;开始尝试从单位项目组拉取项目尝试本地运行。 Git Git相关配置&#xff1a;一篇学会Git版本管理 先申请Git账号&#xff0c;随后由上级分配权限拉入该项目组。 通过git clone ……...

AI绘画结合GPT 把Ai绘画与摄影玩明白

一、绘画与摄影有什么关系&#xff1f; 绘画和摄影是两种不同的艺术形式&#xff0c;它们都以其自身独特的方式捕捉和表达现实。在某些方面&#xff0c;它们是相互联系的&#xff0c;而在其他方面&#xff0c;它们又有所不同。​ 相似之处&#xff1a;绘画和摄影都是创造性的…...

哈工大计算机网络课程数据链路层协议详解之:多路访问控制(MAC)协议

哈工大计算机网络课程数据链路层协议详解之&#xff1a;多路访问控制&#xff08;MAC&#xff09;协议 在上一小节介绍完数据链路层功能和所提供的服务后&#xff0c;接下来我们介绍一个在数据链路层非常重要的一个协议&#xff1a;多路访问控制MAC协议。 多路访问控制主要是…...

docker基本概念和相关命令

!!! 前面都是概念东西&#xff0c;可以直接跳到Docker命令就可以了(直接搜吧“Docker命令”&#xff0c;页内无法跳转&#xff0c;还在研究中……) 容器和虚拟化 容器包含应用和其所有的依赖包&#xff0c;但是与其他容器共享内核。容器在宿主机操作系统中&#xff0c;在用户…...

43. 间断连续登录用户问题

文章目录 题目需求思路一实现一题目来源 题目需求 现有各用户的登录记录表&#xff08;login_events&#xff09;如下&#xff0c;表中每行数据为&#xff1a;一个用户何时登录了平台。 现要求统计各用户最长的连续登录天数&#xff0c;间断一天也算作连续&#xff0c;例如&a…...

Visual Studio Code 编辑器实用插件简介

Visual Studio Code 编辑器插件 以下是一些常用的 Visual Studio Code 编辑器插件及其简短描述&#xff1a; 2gua.rainbow-brackets&#xff1a;在括号周围添加彩虹色的边框&#xff0c;以帮助区分不同层次的括号。adpyke.codesnap&#xff1a;将代码片段转换为漂亮的图片&am…...

微信小程序之Image那些事

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、使用场景二、使用方式1.动态读取image大小2.动态设置style3.动态赋值 总结 前言 小程序中 Image使用频率是非常高的 不同场景下 Image使用的属性也不一样 …...

【MySQL】不就是子查询

前言 今天我们来学习多表查询的下一个模块——子查询&#xff0c;子查询包括了标量子查询、列子查询、行子查询、表子查询&#xff0c;话不多说我们开始学习。 目录 前言 目录 一、子查询 1. 子查询的概念 2. 子查询语法格式 2.1 根据子查询结果不同可以分为&#xff1a;…...

gpt4实现对摄像头帧缓冲区图像的LAB阈值选择界面(python-opencv)

代码全是GPT4写的&#xff0c;我就提出Prompt和要改的地方而已。 图形界面效果 可复制阈值&#xff1a;(xxx, xxx, xxx, xxx, xxx, xxx) 代码 import cv2 import numpy as np import time from tkinter import * from PIL import Image, ImageTk import pyperclip # new# G…...

Stable Diffusion WebUI 集成 LoRA模型,给自己做一张壁纸 Ubuntu22.04 rtx2060 6G

LoRA概念 LoRA的全称是LoRA: Low-Rank Adaptation of Large Language Models&#xff0c;可以理解为stable diffusion&#xff08;SD)模型的一种插件&#xff0c;和hyper-network&#xff0c;controlNet一样&#xff0c;都是在不修改SD模型的前提下&#xff0c;利用少量数据训…...

Flink 读写Kafka总结

前言 总结Flink读写Kafka Flink 版本 1.15.4 Table API 本文主要总结Table API的使用&#xff08;SQL&#xff09;&#xff0c;官方文档&#xff1a;https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/connectors/table/kafka/ kerberos认证相关配置 …...

LiDAR SLAM 闭环——BoW3D论文详解

标题&#xff1a;BoW3D: Bag of Words for Real-Time Loop Closing in 3D LiDAR SLAM 作者&#xff1a;Yunge Cui,Xieyuanli Chen,Yinlong Zhang,Jiahua Dong,Qingxiao Wu,Feng Zhu 机构&#xff1a;中科院沈阳自动化研究所 来源&#xff1a;2022 RAL 现算法已经开源&#…...

Android NTP时间同步源码分析

Android NTP时间同步源码分析 Android系统设置自动时间后&#xff0c;如果连接了可用的网络。会同步网络时间。这个处理是 NetworkTimeUpdateService完成的。某些定制化的系统&#xff0c;需要禁止网络时间同步。比如仅仅使用GPS时间。基于Android9&#xff0c;分析一下 Andro…...

数据库之MySQL字符集与数据库操作

目录 字符集 CHRARCTER SET 与COLLATION的关联 CHRARCTER SET 定义 基础操作 查看当前MySQL Server支持的 CHARACTER SET 查看特定字符集信息&#xff08;主要包含默认的COLLATION 与 MAXLEN&#xff09; COLLATION 定义 COLLATION后缀 基础操作 查看MySQL Server支持的…...

搜索引擎概念解析

搜索引擎概念解析 什么是搜索引擎 MySQL搜索引擎举例 搜索引擎是一种用于在互联网上搜索并呈现相关信息的工具。它通过自动扫描和索引大量网页内容&#xff0c;并根据用户提供的关键词或查询条件&#xff0c;返回与之相关的网页链接和摘要。 当用户在搜索引擎中输入关键词或…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...