vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

原创 轩辕Rowboat 教程 前端 213阅读 2018-06-15 19:49:01 举报

近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。
老模块是用的qrocode中文文档qrcode github

先想着新模块中是否有生成二维码的插件,看了下package.json
有安装一个vue-qriously。但搜索了一下,竟然没有使用,可能是因为很多二维码都是后端生成返回链接给前端的。而在其他H5、微信项目中使用了。看了下这个项目star数是113。但我不想重新引入老模块的qrcodejs,重新引入其他的二维码插件,相对比较麻烦。于是就保持统一用vue-qriously了。
猜想当时引入这个是vue 资源合集awesome-vue中,qrcode相关第一个就是vue-qriously

vue-qriously插件使用

更多参数配置可以查看:github 仓库 v-qriously.vue源码
查看代码可以发现,开头引用了qrious,这个star就多一点,600多。

qrious github 地址
qrious 文档

下载二维码

粗略的翻看下以上相关文档,写完正准备要做下载功能。这时发现,哎呀,竟然就是只生成了一个canvas
于是百度(暴露了用百度...我也想用谷歌,但现在不行...)了下canvas如何转图片。
stackoverflow Capture HTML Canvas as gif/jpg/png/pdf?

生成了imgsrc资源,那么就可以下载了。

但这样写也相对比较麻烦。
项目中封装了一个v-click指令。

代码写到这里,嗯,实现完了下载。但又发现又一需求,显示大小是80 * 80,下载需要是160 * 160

显示大小和下载大小不一样。

参考了下老模块,qrcodejs渲染出来的html,

vue-qriously渲染出来是

于是我可以把生成的imgSrc资源,

这就实现了下载的资源是160 * 160,用样式控制图片显示80 * 80
代码写完,觉得应该给vue-qriously写个pr,实现 不仅仅是渲染canvas,而是让大家可以选择时img还是canvas。又去翻了翻这个项目的issue,有一个issue链接:how to make this canvas exchange to img 就是说的这个。还没关闭。

文章写到这里,我发现这样似乎不太妥。我的场景,是点击时显示浮层(浮层有二维码和复制链接地址和下载二维码按钮等),获取canvas元素,去转成img src,再去渲染到页面,而且图片可能会闪,因为是实际大小是160,样式强制控制在80
何不生成两份,一份是用来获取资源下载的。一份用来显示的。嗯,之后去优化下。
顺带说一下,复制粘贴

cliploard 复制粘贴

老模块中是用的cliploardclipboard github仓库。就是我引入的。

新模块还没使用过,但依然使用这个。

当然也可以封装成vue指令。
可以参考vue-element-admin这个项目
之前我看的时候还是3000star,现在1.2w+,说明值得学习。
另外推荐awesomes网站 工具类库合集

关于

作者:常以轩辕Rowboat为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
个人博客
segmentfault个人主页
掘金个人主页
知乎
github

小结

1、引入第三方插件等使用时,多查看github 文档 issue等,在技术社区搜索别人使用的方案。
2、选用第三方插件时,尽可能挑选star比较多的,issue处理比较及时的,在更新维护的。
3、富余时间可以多研究下别人的项目是如何组织文件,和实现的一些常用功能的。
4、尽可能去优化自己的代码,总结回顾。

文章首发于Segmentfault vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复