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

以上就是vue + element-ui + qrcodejs2 实现二维码生成的介绍，做此记录，如有帮助，欢迎点赞关注收藏！