Here are two methods for Vue to generate QR codes
vue-qr
has more functions than QRcode
: logo can be added in the middle
npm install qrcodejs2
Import on the required page
import QRCode from'qrcodejs2'
<div class="qrcode" ref="qrCodeUrl"></div>
<script>
methods: {
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: 'xxxx',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
}
mounted() {
this.creatQrCode();
},
</script>
npm install vue-qr --save
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
import vueQr from 'vue-qr'
export default {
name: "qecode",
data() {
return {
imageUrl: require("../assets/logo.png"),
}
},
components: {
vueQr
},
},
}
</script>
Is it much simpler than qrcode
, but there are still differences between the two styles of generating QR codes.
Note: It should be noted that the referenced img
path must be added with require