安装插件:
npm install qrcode -S
需要Canvas画布:
QrCode.toCanvas(dom, info)
// dom为一个canvas的dom对象, info为转化二维码的信息
dom:是一个Canvas的dom对象可通过:在canvas身上加ref属性获取canvas,
info:传入什么就吧什么生成二维码,这里传入的是图片所以扫出来的二维码是图片的地址
例如:
<el-dialog
title="头像二维码"
:visible="dialogVisible"
width="30%"
@close="dialogVisible = false"
>
<canvas ref="myCanvas" />
</el-dialog>
QrCode.toCanvas(this.$refs.myCanvas, 图片地址)
但是呢,这么写会报一个错,缺少getContext这个东西,这是canvas上下文的方法,当你的画布不存在的时候会报这个错误!!!!
解决方式:
this.$nextTick(() => {
QrCode.toCanvas(this.$refs.myCanvas, url)
})