Vue3 + ElementPlus + Vite 重构若依Vue2 表单构建功能

若依官方的Vue3 版本发布已经有段时间了，就是这个表单构建功能一直没有安排计划去适配到Vue3！

前段时间公司需要做个类似的功能，就直接借鉴若依Vue2的来直接改了

吐槽下：vuedraggable-vue3 坑真多，官方文档一言难尽，现在不推荐使用；

对该文章再此补充部分

使用插件的形式注入svg到整个dom节点，如下代码

transformIndexHtml(html) {

   return html.replace(

     '<body>',

     `

       <body>

         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">

           ${res.join('')}

         </svg>

     `,

   );

 },

可以看到return html.replace('<body>', 该代码 第一个替换参数是 '<body>' 不能修改body标签，如：<body > or < body> or < body > 浏览器都能识别改标签，但是此处不能替换会导致插件替换失效

Vue3h函数章节

项目使用

"clipboard": "^2.0.11", //剪切板

"element-plus": "^2.3.3",

"file-saver": "^2.0.5", //文件下载

"js-beautify": "^1.14.3", //js格式化

"sass": "^1.62.0",

"vue": "^3.3.4",

"vuedraggable": "^4.1.0" //拖拽

效果截图

23.cnblogs.com/blog/1640037/202307/1640037-20230731134328437-569658728.jpg)

部分代码

Git地址

https://gitee.com/kkdaj/ruoyi-vue3-auto-form

代码提供给各位了，大佬勿喷，对你有帮助点个赞吧

VUE3、ElementPlus 重构若依vue2 表单构建功能的更多相关文章

phpcms v9 的表单向导功能的使用方法
本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...
phpcms v9 的表单向导功能的使用方法附多个案例
本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...
js之表单记忆功能
在项目中,我们难免会遇到希望相同用户操作本次打开页面时可以展现或者自动记录上次登录系统点击过的的复选框,单选按钮等操作的状态,也就是表单记忆功能,这时,一个很重要的技术便派上了用场,即cookie. ...
vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
Ruoyi表单构建
Ruoyi表单构建通过拖动组件就能自动生成前端代码,很方便,所以本文简单通过上层函数源码来梳理一下大致流程,如有需要再自行仔细一行行分析底层代码. 组件拖动实现组件拖动功能主要依赖第三方库:VueD ...
Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单表单表单,你已经长大了,你要学会: 动态渲染支持单列.双列.多列支持调整布局支持表单验证支持调整排列(显示)顺序依据组件值显示需要的组件支持 item 扩展组件可以自动创 ...
artEditor增加表单提交功能
摘要: artEditor.js是一款移动端的富文本编辑器,支持图片上传,后面会增加表情.小视频等功能.最近有朋友反馈artEditor是否支持表单提交,当然是支持的,在未开发该功能之前,你可以像下面 ...
(译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
(译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

随机推荐

GPT护理机器人 - 让护士的工作变简单
引子书接上文<GPT接入企微应用 - 让工作快乐起来>,我把GPT接入了企微应用,不少同事都开始尝试起来了.有的浅尝辄止,有的刨根问底,五花八门,无所不有.这里摘抄几份: "帮 ...
2023-02-14：魔物了占领若干据点，这些据点被若干条道路相连接， roads[i] = [x, y] 表示编号 x、y 的两个据点通过一条道路连接。现在勇者要将按照以下原则将这些据点逐一夺回：
2023-02-14:魔物了占领若干据点,这些据点被若干条道路相连接, roads[i] = [x, y] 表示编号 x.y 的两个据点通过一条道路连接. 现在勇者要将按照以下原则将这些据点逐一夺回: ...
2022-04-25：给定一个整数数组，返回所有数对之间的第 k 个最小距离。一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值。输入： nums = [1,3,1] k = 1 输出：
2022-04-25:给定一个整数数组,返回所有数对之间的第 k 个最小距离.一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值. 输入: nums = [1,3,1] k = 1 输出: ...
2021-02-21：手写代码：高性能路由，也就是一个字符串和多个匹配串进行模糊匹配。一个数组arr里是["*a*","moonfdd"]，字符串"moonfdd"能匹配到，理由是arr里有。字符串"xayy"也能匹配到，理由是arr里的"*a*"，第1个星对应"x"，第2个星对应"yy"。
2021-02-21:手写代码:高性能路由,也就是一个字符串和多个匹配串进行模糊匹配.一个数组arr里是["a","moonfdd"],字符串"moo ...
2021-10-21：Excel 表列序号。给你一个字符串 columnTitle ，表示 Excel 表格中的列名称。返回该列名称对应的列序号。示例 1:输入: columnTitle = “A“，
2021-10-21:Excel 表列序号.给你一个字符串 columnTitle ,表示 Excel 表格中的列名称.返回该列名称对应的列序号.示例 1:输入: columnTitle = &quo ...
ERRORS: app1.Book.photo: (fields.E210) Cannot use ImageField because Pillow is not installed.
报错: (env) E:\pyAPP\mybook>python manage.py makemigrations SystemCheckError: System check identifi ...
域名配置动态代理后，为什么每次 ping 还是相同的 ip?
当你配置了域名的动态代理后,ping 命令所显示的 IP 地址不会随着代理服务器的变化而变化. 这是因为 ping 命令使用了 DNS 缓存,它会将域名解析结果缓存到本地,直到缓存过期或者手动清除缓存 ...
Doris(一) -- 简介和安装
Doris 简介 Doris 概述 Apache Doris 由百度大数据部研发 (之前叫百度 Palo,2018 年贡献到 Apache 社区后,更名为 Doris), 在百度内部,有超过 200 ...
一分钟学一个 Linux 命令 - mkdir 和 touch
前言大家好,我是god23bin.欢迎来到<一分钟学一个 Linux 命令>系列,今天需要你花两分钟时间来学习下,因为今天要讲的是两个命令,mkdir 和 touch 命令.前一个命令是 ...
函数接口（Functional Interfaces）
定义首先,我们先看看函数接口在<Java语言规范>中是怎么定义的: 函数接口是一种只有一个抽象方法(除Object中的方法之外)的接口,因此代表一种单一函数契约.函数接口的抽象方法可以是 ...

VUE3、ElementPlus 重构若依vue2 表单构建功能

Vue3 + ElementPlus + Vite 重构 若依Vue2 表单构建功能