博客
关于我
在vue项目中使用qrcodesjs2生成二维码
阅读量:336 次
发布时间:2019-03-04

本文共 697 字,大约阅读时间需要 2 分钟。

最近写项目遇到一个需求需要生成二维码,看了一下项目中生成二维码使用的都是qrcodesjs2,而且操作比较简单。在这里简单记录一下

安装

npm i qrcodejs2 -S

html

项目中需要打印多个二维码,而且这样更加通用无论打印单个还是多个都可以

js

// 生成二维码   printTwoCode(width) {          for (let j in this.qrcode) {              let code = this.qrcode[j]; // 二维码内容           new QRCode(this.$refs[`${     this.qrcode[j]}`][0], {                  text: code,               render: 'canvas',               width: width,               height: width,               colorDark: '#000000',               colorLight: '#ffffff'           });       }   },

清除

for (let j in this.qrcode) {          this.$refs.qrcode[j][0].innerHTML = ''  }

使用

this.$nextTick(() => {        this.printTwoCode(130); });

转载地址:http://megh.baihongyu.com/

你可能感兴趣的文章
Nginx学习总结(11)——提高Nginx服务器的安全性,稳定性和性能的12种技巧
查看>>
Nginx学习总结(12)——Nginx各项配置总结
查看>>
Nginx学习总结(13)——Nginx 重要知识点回顾
查看>>
Nginx学习总结(14)——Nginx配置参数详细说明与整理
查看>>
Nginx学习总结(15)—— 提升 Web 应用性能的十个步骤
查看>>
Nginx学习总结(1)——Nginx入门简介
查看>>
Nginx学习总结(2)——Nginx手机版和PC电脑版网站配置
查看>>
Nginx学习总结(3)——Nginx配置及应用场景之高级配置
查看>>
Nginx学习总结(4)——负载均衡session会话保持方法
查看>>
Nginx学习总结(5)——Nginx基本配置备忘
查看>>
Nginx学习总结(7)——Nginx配置HTTPS 服务器
查看>>
Nginx学习总结(8)——Nginx服务器详解
查看>>
Nginx学习总结(9)——前端跨域问题解决
查看>>
nginx学习笔记
查看>>
nginx学习笔记002---Nginx代理配置_案例1_实现了对前端代码的方向代理_并且配置了后端api接口的访问地址
查看>>
nginx学习笔记003---Nginx代理配置_注意,在Windows中路径要用/
查看>>
Nginx学习笔记(一) Nginx架构
查看>>
nginx学习路线
查看>>
Nginx安装
查看>>
Nginx安装SSL模块 nginx: the “ssl” parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx
查看>>