在线体验：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

• https://gitee.com/postbird/vue-online-qrcode

github

• https://github.com/postbird/vue-online-qrcode