首页 > 其他分享 >VUE3、ElementPlus 重构若依vue2 表单构建功能

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

时间:2023-07-31 13:56:04浏览次数:45  
标签:body 插件 ElementPlus Vue3 表单 若依 vuedraggable vue2 VUE3

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
代码提供给各位了,大佬勿喷,对你有帮助点个赞吧

标签:body,插件,ElementPlus,Vue3,表单,若依,vuedraggable,vue2,VUE3
From: https://www.cnblogs.com/kkdaj/p/17593237.html

相关文章

  • 坑:vue2在props时仅接受第一次返回数据的解决办法
    今天在做项目时遇到了一个bug,在列表页进入详情页时带入list以便子组件遍历使用,使用props传参,该list在父组件由created生命周期函数访问接口获取,然后子组件在使用时,直接使用props接收并调用,大概代码如下://父组件<Child:list='list'/>...created(){getListApi().then(list......
  • vue2集成simple-mind-map思维导图,实现在线制作思维导图
    1.使用组件组件源码版本licensesimple-mind-map地址0.6.6MIT@toast-ui/editor地址3.1.5MITv-viewer地址1.6.4MITxlsx地址0.18.5Apache-2.0vue-i18n地址8.27.2MIT2.组件结构(部分)3.截图4.示例项目项目一:gitee......
  • vue2集成bpmn流程图,可导入导出预览等
    1.使用到的组件组件源码版本licensebpmn-js地址7.3.1bpmn.iobpmn-js-properties-panel地址0.37.2MITcamunda-bpmn-moddle地址4.5.0MIT版本一定要对,否则可能会报错2.组件代码<template><divid="app"><divclass="container">......
  • vue2集成tinymce富文本编辑器,添加本地资源解决加载慢问题
     组件源码版本licensetinymce地址4.9.3MIT示例项目一源码地址:gitee1.封装组件<template><div:class="{fullscreen:fullscreen}"class="tinymce-container":style="{width:containerWidth}"><textarea:id="tinymc......
  • vue3
    一、vue3最终响应式原理letperson={name:'张三',age:15,}//我们管p叫做代理数据,管person叫源数据constp=newProxy(person,{//target代表的是person这个源对象,propName代表读取或者写入的属性名get(target,propName){console.log('有人......
  • vue3
    1、ref深拷贝视图层更新不改变源数据constnum=1constrefNum=ref(num)constclick=()=>{refNum++//refNum已经改变了,但原数据num不变}2、toRef源数据改变不更新视图3、toRefs传入一个响应式对象constobj=reactive{name:"iwen",age:19}//取值为obj.na......
  • 前端系列21集-vue3,轨迹展示
    AMap.InfoWindow<template><div><div:style="customStyle"class="custom-box"><!--Yourcontenthere--></div></div></template><scriptsetup>import{ref,reactive......
  • Vue3中使用TypeScript封装axios遇到的问题(AxiosRequestConfig)
    如果您有更好的解决方法,欢迎评论区评论。版本"dependencies":{"axios":"^1.0.0","vant":"^4.6.3","vue":"^3.3.4","vue-router":"^4.2.4","vuex":&quo......
  • uniapp+vue3+ts 使用pinia报错
    "hasInjectionContext"isnotexportedby"node_modules/vue-demi/lib/index.mjs",importedby"node_modules/pinia/dist/pinia.mjs".11:36:19.397at../node_modules/pinia/dist/pinia.mjs:6:9解决方法:把pinia降级先删除pinianpmunipinia......
  • vue2遇到的一些错误
    一、VUE中的VUEX如何调用modules里面的mutations和state ...mapMutations("workflow",['setApproverConfig','setApprover']),二、Non-nestedroutesmustincludealeadingslashcharacter.Fixthefollowingroutes:-JSExpression 出错点Non-nest......