vue + element-ui + qrcodejs2 实现二维码生成

原创

GoodTime

发布于 2023-10-31 10:37:36

9330

发布于 2023-10-31 10:37:36

1、在所在项目下安装插件

npm i qrcodejs2

2、在需要生成二维码的页面引入qrcodejs

import QRCode from 'qrcodejs2'

3、使用

<el-button size="mini" type="primary" icon="el-icon-picture-outline" round @click="GenerateQRCode()">生成二维码</el-button></div>
<div id="qrcode" ref="qrcode"></div>

回调函数

// 生成二维码
GenerateQRCode () {
    document.getElementById('qrcode').innerHTML = '' // 防止一直点击按钮重复生成二维码
    const qrcode = new QRCode('qrcode', {
        width: 200, // 二维码宽度，单位像素
        height: 200, // 二维码高度，单位像素
        text: this.softLink, // 生成二维码的链接
      })
      console.log('二维码信息：', qrcode)
    },
}