- 先安装依赖
npm install qrcode-npm
2.导入模块
import $ from "jquery";
3.前端点击事件和方法
<el-button type="primary" size="mini" @click="qrCode">生成二维码</el-button>
//在data定义弹窗变量:
qrVisable:false
//qrCode 将链接生成二维码
qrCode(){
if(this.form.linkAddress){
this.qrVisable = true
var QRCode = require('qrcode')
QRCode.toDataURL(this.form.linkAddress)
.then(url => {
var qrbox = document.querySelector("#qrcode");
qrbox.innerHTML = '';
const img = new Image();
img.src=url;
img.width = 150;
qrbox.appendChild(img);
})
.catch(err => {
console.error(err)
})
}
},
4.弹出生成二维码组件
<el-dialog :visible="qrVisable" width="300px" @close="qrVisable = false">
<div id="qrcode" style="width:100px; margin-left: 50px;"></div>
</el-dialog>