66

Vue

前言

不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近就是碰到了类似的需求,忍无可忍,遂该项目便诞生了了。

正文

演示

gif 图稍大,若加载不出来请稍等片刻 (..•˘_˘•..)

演示1

演示2

项目地址

如果觉得我有帮到什么忙的,欢迎 star,我会更有动力的 (ง •̀_•́)ง。

Vue 拖拽图表

使用方法

详细的开发指南和配置参数就不在此赘言,在项目文档中已经有详细的说明,这里只是稍微介绍一下。

  • 首先该项目分为两个页面,一个是拖拽排版页面,一个是预览页面,布局都在排版页面中完成
  • 在排版页面中,左侧的 + 用来添加行(row),右侧的 + 用来添加列(col),或称组件
  • 所有的操作皆可通过拖拽完成,在完成排版之后点击 >> 按钮即可预览生成的页面
  • 在预览页面中有纯前端实现的 pdf 导出功能,具体思想是将 dom 转为 canvas,再导出为图片,再将图片转为 pdf
  • 当前的数据传输方式是将布局保存在了 localstorage 中得以实现的
  • 实际项目中建议的流程是先在排版页面中新建或者修改布局,在预览页面再保存或者更新布局

后语

减少人类重复无意义的工作,这就是程序员存在的意义,同时也是我的目标,不可否认该项目里面还是有不少冗余代码,一点点修改一点点完善,也欢迎大家私信我交流交流,撒花。

页脚

代码即人生,我甘之如饴。

我在这里 gayhub@jsjzh 欢迎大家来找我玩儿。

欢迎小伙伴们直接加我,拉你进群一起学习前端呀,记得备注一下你来自哪里哦。

wechat

wechat

你可能感兴趣的

我在长安长安 · 3月13日

一直想做这个来着,赞

回复

我在长安长安 · 3月13日

还有一个思路就是写一个图表管理页面,页面设置图表类型,图表需要的数据还有相关配置之类的,然后在哪个页面要用就直接调这个接口然后把数据放入对应得图表组件中

回复

0

老哥思路不错,这么做也很赞,不过怕不是头秃的更快了,哈哈哈 ๑乛◡乛๑

裤裆三重奏 作者 · 3月13日
0

@裤裆三重奏 秃是不可能秃的,这辈子都不可能秃的^_^

我在长安长安 · 3月13日
焦政 · 3月15日

@裤裆三重奏 楼主很棒,希望你未来可以开发出在浏览器进行拖拽布局,像墨刀那样,拖拽出一个手机商城,最后点击一键编译,生成一个完整的Vue项目,然后在页面写逻辑,调接口就OK 了

回复

0

刚去看了一下墨刀,有点帅气,有点跃跃欲试了,谢谢你的建议!~~~

裤裆三重奏 作者 · 3月15日
0

今天也在社区@了 尤大大和墨刀研发团队,真心希望他们能够在未来合作,前端再也不需要慢腾腾的画页面了,拖拽就好了,大家应该把重心放到业务逻辑与数据交互上面,前端程序员搞搞javascript和Node层

焦政 · 3月15日
0

@裤裆三重奏 好希望能有这么个组织专门致力于前端的拖拽构建。在未来UI设计师做好设计图,由UI来进行拖拽构建,最后一键生成前端代码,当然这块可以试Vue的脚手架也可以是React的,前端工程师开始开发就OK了

焦政 · 3月15日
玄凌苍 · 5月17日

一直想做 不知道是不是脑子比较笨 一直没思路

回复

载入中...