# Vue3 + ElementPlus + Vite 重構 若依Vue2 表單構建功能 若依官方的Vue3 版本發佈已經有段時間了，就是這個表單構建功能一直沒有安排計划去適配到Vue3！ 前段時間公司需要做個類似的功能，就直接借鑒若依Vue2的來直接改了 吐槽下：vuedraggable-vue3 ...
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
代碼提供給各位了，大佬勿噴，對你有幫助點個贊吧
