1.安装插件
npm i qrcode
2.基本用法
// 基本用法
import QrCode from 'qrcode'
// dom为一个canvas的dom对象, info为转化二维码的信息
QrCode.toCanvas(dom, info)
3.实例
表现部分(html)canvas是图像标签
<!-- 二维码弹框 -->
<el-dialog title="二维码" :visible.sync="codeDialogVisible" width="20%">
<el-row type="flex" justify="center">
<canvas ref="myCanvas" />
</el-row>
</el-dialog>
js实现部分
//最上方引入
import QrCode from 'qrcode'
// 二维码弹框打开
openCode(url) {
if (!url) return // 有图片才显示弹层
this.codeDialogVisible = true
this.$nextTick(() => {
QrCode.toCanvas(this.$refs.myCanvas, url)
})
},
this.$nextTick()没有的话会报错