VUE3、ElementPlus 重构若依vue2 表单构建功能
Vue3 + ElementPlus + Vite 重构 若依Vue2 表单构建功能
若依官方的Vue3 版本发布已经有段时间了，就是这个表单构建功能一直没有安排计划去适配到Vue3！
前段时间公司需要做个类似的功能，就直接借鉴若依Vue2的来直接改了
吐槽下：vuedraggable-vue3 坑真多，官方文档一言难尽，现在不推荐使用；
优秀文章：vite插件注册svg-icon 图标
对该文章再此补充部分
- 使用插件的形式注入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 >浏览器都能识别改标签，但是此处不能替换会导致插件替换失效
项目使用
"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中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
随机推荐
- 【图解算法使用C++】1.2 生活中的算法
图解算法使用C++ 一.计算思维与程序设计 1.2 生活中到处都是算法 计算最大公约数(辗转相除法) // C++ #include<iostream> #include<stdio ...
- 从源码深入理解读写锁(golang-RWMutex)
环境:go 1.19.8 在读多写少的情况下,即使一段时间内没有写操作,大量并发的读访问也不得不在Mutex的保护下变成串行访问,这种情况下,使用Mutex,对性能影响比较大. 所以就要区分读写操作. ...
- GE反射内存实时通讯网络解决方案
时通讯网络是用于需要较高实时性要求的应用领域的专用网络通讯技术,一般采用基于高速网络的共享存储器技术实现.它除了具有严格的传输确定性和可预测性外,还具有速度高.通信协议简单.宿主机负载轻.软硬件平台适 ...
- Github 自动化部署
github action 自动化部署 一.创建github 账户 官方地址 点击进入 注册/登录 二.在项目目录下创建文件 .github\workflows固定不变 develop.yml文件名自 ...
- 【python爬虫】bilibili每周必看页面视频图片爬取
此博客仅作为交流学习 对于使用bilibili上学习和娱乐的小伙伴们有时会看到视频博主发布的视频封面好看想要得到,但是苦于没有方法,这次我用python来爬取bilibili每周必看页面视频图片. 首 ...
- 2022-10-03：给定一个正数n，比如6 表示数轴上有 0,1,2,3,4,5,6 ＜0 或者 ＞6 的位置认为无法到达 给定两个数字x和y，0＜= x，y ＜= n 表示小人一开始在x的位置，它
2022-10-03:给定一个正数n,比如6 表示数轴上有 0,1,2,3,4,5,6 <0 或者 >6 的位置认为无法到达 给定两个数字x和y,0<= x,y <= n 表示 ...
- 2021-05-06：给定一个二维数组matrix， 你可以从任何位置出发，走向上下左右四个方向 。返回能走出来的最长的递增链长度。
2021-05-06:给定一个二维数组matrix, 你可以从任何位置出发,走向上下左右四个方向 .返回能走出来的最长的递增链长度. 福大大 答案2021-05-06: 自然智慧即可. 动态规划.二维 ...
- docker安装es，单机集群模式.失败。
操作系统:mac系统. docker run -d --name es1 -p 9201:9200 -p 9301:9300 elasticsearch:7.14.0 docker run -d -- ...
- CST为什么要关闭 GPU 卡的 ECC 模式而开启 TCC 模式？操作使用【详解】
在使用CST软件之前,我们一般建议大家关闭 GPU 卡的 ECC 模式而开启 TCC 模式.那么,为什么要进行这样一个操作呢?在此之前,给大家科普一下什么是"ECC"和" ...
- Python-PyQt5的安装与简单使用
一.安装 1.安装 PyQt5 和 PyQt5-tools pip install PyQt5 -i https://pypi.douban.com/simple pip install PyQt5- ...