导入qrcode插件

npm install qrcode2 --save

二维器生成器

import QRCode from 'qrcodejs2'

export function qrcode(id, code, w, h) {
new QRCode(id, {
width: w || 124,
height: h || 124,
text: code // 二维码内容
// render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
}

vue实现

<template>
<div id="qrcode" />
</template>
<script>
import { qrcode } from '@/utils/qrcode'
export default {
// eslint-disable-next-line vue/no-unused-components
// components: { },
data: function() {
return {
temp: {
code: '123456',
qrcode: undefined
}
}
},
created() {
this.$nextTick(function() {
this.qrcode()
})
},
methods: {
// 生成二维码
qrcode() {
qrcode('qrcode', this.temp.code, 100, 100)
}
}
}
</script>