qrcode是一个用于生成二维码图片的插件
地址：https://www.npmjs.com/package/qrcode
安装
安装：npm i qrcode --save
引入
需要用到的页面组件或者js文件中直接引入
import QRCode from 'qrcode'
使用
<canvas id="canvas" style="width:300px;height:300px;"></canvas>
<script>
import QRCode from 'qrcode'
export default {
mounted () {
this.getCode()
},
methods: {
getCode () {
let canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, 'http://localhost:8080/home', { width: 200 }, function (error) {
if (error) console.error(error)
console.log('success!')
})
}
}
}
</script>
Api
toCanvas
toDataURL
toString
最终实现
安装及引用如上方nuxt配置
<template>
<client-only>
<vue-qr :text="link" :size="108" :logoSrc="logoSrc" :logoScale="0.25" :margin="10" :dotScale="1"></vue-qr>
</client-only>
</template>
<script>
const logoSrc = require('@/assets/image/pc/logo-rect.png');
export default {
data() {
return {
link: '',
logoSrc: logoSrc
};
}
mounted() {
this.$nextTick(function () {
//生成当前地址二维码
this.link = window.location.href;
})
}
}
</script>
缺点：打包时会被编译，会报错
解决：使用其他库，例如vue-qr
参考：
引用/安装及生产环境兼容，参考：
