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

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)
    },
}

posted @ 2021-11-09 17:56  GoodTimeGGB  阅读(89)  评论(0编辑  收藏  举报