vue 实现在线多二维码生成服务
在线体验:https://postbird.gitee.io/vue-online-qrcode/
一、背景
在开发过程中(尤其是专门为手机开发页面)的时候,基本都会扫码进行手机真机查看。
之前写 ReactNative 或者写 weex 的时候尤其需要在真机上扫码查看最终的产出效果,而一般可能选择的使用服务为:
- 联图二维码
- 草料二维码
- 一些二维码 chrome 插件等
联图二维码的好处是实时根据编辑生成新的二维码,但是页面很不友好,广告也有点多,比较烦人,草图二维码算是比较好用的,但是目前文字生成二维码已经有限制 150 个文字长度了,因此也比较尴尬,chrome 插件需要每次点击生成,不然就没了。
上面列举的几个二维码生成服务有各自的优点,不过他们功能的缺点就是没办法同时生成多个二维码。
多个二维码显示的需求场景一般为不同的 URL 后面可能带参数,也可能根据不同的环境使用不同的二维码,甚至有些时候,因为同时兼顾多个业务,导致需要好几个不同业务的二维码去扫,这时候一般就需要频繁更新或者是开好几个浏览器的 tab,比较麻烦。
基于上面的场景和需求,用 vue 做了个简单的 在线多二维码生成服务,可以在一个页面中生成多个二维码用来扫描,并且能够从缓存中取加载二维码列表,防止因为刷新页面而造成的二维码丢失。
二、功能需求
需要有二维码生成的诸多功能,并且根据需要增加了多二维码的一些需要的功能。
- Create 二维码
- Delete 二维码
- Update 二维码
- 维护一个二维码列表
- 从缓存中读取当天的二维码列表缓存,用来防止刷新后丢失列表
- 设置二维码蒙层防止多个二维码存在导致的误扫描
- ....
三、Vue 实现功能
组件结构
- App.vue // 入口组件
- Add.vue // create 表单
- Header.vue // 页面头部
- HelloWorld.vue // no
- QrcodeItem.vue // 单个二维码卡片
- QrocdeList.vue // 二维码列表
- Update.vue // update 表单
其中二维码卡片承载了 二维码显示、Mask 显示、标题、创建时间和操作按钮等。
四、效果
在线体验:https://postbird.gitee.io/vue-online-qrcode/
效果
五、仓库
gitosc
github
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/vue-online-mutiple-qrcode.html
转载请注明文章原始出处 !
输出频率好高.. 佩服