1.这里用到的插件是:qr-code-with-logo,所以第一步先安装此插件
npm install --save qr-code-with-logo
2.写个div用来存放二维码图片
<li>
<i class="wx"></i>
微信扫一扫
<div id="qrcodeCanvas"></div>
</li>
3.生成二维码的方法:(在mounted的时候调用一下此方法就可以了)
weChatQrCode () {
const qrcode = document.getElementById(`qrcodeCanvas`)
const myCanvas = document.createElement('canvas')
qrcode.appendChild(myCanvas)
QrCodeWithLogo.toCanvas({
canvas: myCanvas,
content: this.url, // 这里的url就是要分享的页面
width: 110,
errorCorrectionLevel: 'L',
borderSize: 0, //计算模式,
margin: 0
// 二维码里放的图标
logo: {
src: xxxx
}
})
}