vue中使用qrcodejs2 生成二维码

最新推荐文章于 2024-06-08 17:14:01 发布

原创最新推荐文章于 2024-06-08 17:14:01 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

前端小知识点同时被 2 个专栏收录

69 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

本文详细介绍了如何使用qrcodejs2库在前端项目中生成二维码。包括库的安装、引入、HTML结构设定及JS代码实现。通过具体示例展示了生成二维码的方法，并提供了效果预览。

一、安装

npm install qrcodejs2 --save

二、引用

 import  QRcode from 'qrcodejs2'

三、HTML

<div id="qrcode"></div>

四、js

 methods: {
       // 生成二维码
    qrcode() {
      let that = this;
        let qrcode = new QRCode('qrcode', {
        width: 124,
        height: 124,        // 高度
        text:  this.link,   // 二维码内容
        render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#000',   // 背景色
        foreground: '#900'    // 前景色
        })
      console.log(qrcode);
    },
 },
 mounted () {
     this.qrcode()
 }