前段使用vue qrcode生成二维码

最新推荐文章于 2024-04-01 18:30:01 发布

Mr_zrh

最新推荐文章于 2024-04-01 18:30:01 发布

阅读量615

点赞数 1

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Mr_zrh/article/details/123246378

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在项目中使用qrcode库生成二维码。首先，通过npm安装qrcode为开发依赖；接着，在页面中导入并使用该库；然后，声明二维码内容变量；最后，调用toCanvas方法将URL地址转化为二维码并绘制到canvas元素上，同时设置了二维码的容错级别、类型、质量和尺寸等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


```html
 <canvas id="QRCode_header"></canvas>
1.安装依赖
npm install qrcode --save-dev	
`
2.使用的页面中引入``
import QRCode from 'qrcode' // 引入生成二维码插件

3.data 中声明
QRCodeMsg: ''

4.生成二维码
    getQRCode () {
      const opts = {
        errorCorrectionLevel: 'H', // 容错级别
        type: 'image/png', // 生成的二维码类型
        quality: 0.3, // 二维码质量
        margin: 12, // 二维码留白边距
        width: 200, // 宽
        height: 200, // 高
        text: 'http://www.baidu.com', // 二维码内容
        color: {
          dark: '#333333', // 前景色
          light: '#fff'// 背景色
        }
      }
      this.QRCodeMsg = 'http://www.baidu.com' // 生成的二维码为URL地址js
      const msg = document.getElementById('QRCode_header')
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
        console.log(error)
      })
    }