在vue中使用qrcode生成二维码

发布时间:2022-06-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了在vue中使用qrcode生成二维码脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

作用: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生成二维码全部内容,希望文章能够帮你解决在vue中使用qrcode生成二维码所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: