在vue中生成二维码使用qrcodeJs

什么是 QRCode.js？
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

<div id="qrcode"></div>
<script type="text/javascript">
   new QRCode(document.getElementById("qrcode"), 
      "https://www.qtshe.com"  // 设置要生成二维码的链接
   );  
</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("test", {
    text: "https://www.qtshe.com",
    width: 130,
    height: 130,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("https://m.qtshe.com"); // 生成另外一个二维码

在vue里使用qrcodeJs

vue里安装qrcodejs的npm包

npm install qrcodejs2

import QRCode from 'qrcodejs2'

<div class="qrcode" ref="qrCodeUrl"></div>

creatQrCode() {
  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      text: 'https://www.qtshe.com',
      width: 100,
      height: 100,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
 })
},

浏览器兼容性
IE6〜10，Chrome，Firefox，Safari，Opera，Mobile Safari，Android，Windows Mobile等
就说到这吧。有啥问题加QQ群111857902 或者QQ8662054

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界

在vue中生成二维码使用qrcodeJs

青团社招聘：

推荐阅读更多精彩内容