1、页面中添加一个div
<div id="qrCode" ref="qrCodeDiv"></div>
2、在script中引用插件
import QRCode from 'qrcodejs2'
3、添加调用的方法qrcode
// 生成二维码 qrcode (text) { this.qrCodeDialogVisible = true document.getElementById('qrCode').innerHTML = '' setTimeout(() => { // eslint-disable-next-line no-new new QRCode(this.$refs.qrCodeDiv, { text: text, width: 300, height: 300, colorDark: '#333333', // 二维码颜色 colorLight: '#ffffff', // 二维码背景色 correctLevel: QRCode.CorrectLevel.H // 容错率L/M/H }, 100) }) }
这样就可以了。
参考:https://www.cnblogs.com/cengjingdeshuige/p/10551629.html
注意:如果使用了el-dialog来包含二维码的div,则需要使用使用<div slot="footer">来包含div。原因是el-dialog是懒加载的。具体原因参考:https://blog.csdn.net/weixin_43361722/article/details/101207052
<!--二维码--> <el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="340px"> <div slot="footer" class="dialog-footer"> <div id="qrCode" ref="qrCodeDiv"></div> <el-button type="warning" @click="123">保存二维码</el-button> </div> </el-dialog>