• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

在vue中使用qrcode生成二维码

互联网 diligentman 4小时前 2次浏览

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

在vue中使用qrcode生成二维码

本文主要 描述   toCanvas 方法

使用 :

  • 安装

    yarn add qrcode
    
  • 导入

     import qrcode from 'qrcode'
  • 定义一个canvas标签放二维码

    • <canvas ref="canvas" />
  • 生成

    • qrcode.toCanvas(canvasElement, text, [options], [cb(error)])
    • canvasElement:画布标签
    • text: 需要编码的数据
    • cd(error):回调
    • options:配置项===>
      {
         text:要生成二维码的地址
         width;二维码的宽度
         height:二维码的高度
         colorDark:二维码的背景色
         colorLight:二维码的前景色
         以上配置只是一部分配置,
      }
      
      //例子:
        qrcode.toCanvas(this.$refs.canvas, imgsrc, { with: 400, height: 400 })


程序员灯塔
转载请注明原文链接:在vue中使用qrcode生成二维码
喜欢 (0)