VUE3、ElementPlus 重构若依vue2 表单构建功能
  mQahPZIjxV2d 2023年11月01日 34 0
Vue

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

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

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

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

vuedraggable-vue3官方文档

优秀文章:vite插件注册svg-icon 图标

对该文章再此补充部分

  1. 使用插件的形式注入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>
         `,
       );
     },
    
  2. 可以看到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" //拖拽

效果截图

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

部分代码

image

Git地址

https://gitee.com/kkdaj/ruoyi-vue3-auto-form
代码提供给各位了,大佬勿喷,对你有帮助点个赞吧

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  JZjRRktyDDvK   13天前   28   0   0 Vue
mQahPZIjxV2d