1.安装生成二维码插件
npm install qrcode --save
2、在需要使用到生成二维码的组件中引入
import QRCode from 'qrcode'
3、在HTML中定义生成的位置,注意添加样式
html:
<canvas id="qrCodeCanvas"></canvas>
css:
#qrCodeCanvas{
padding: 0!important;
margin: 0!important;
width: 100%!important;
height: auto!important;
}
4、在js中定义生成二维码的方法并调用
//动态生成二维码
useqrcode(){
//生成的二维码内容,可以添加变量
this.QueryDetail='https://www.baidu.com/';//写入要生成二维码的网址
var canvas = document.getElementById('qrCodeCanvas')
QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
if (error) console.error(error)
console.log('success!');
})
},