vue-qr-print
Installation
Using NPM:
$ npm i vue-qr-print
Usage
In your main.js file:
import VueQrPrint from 'vue-qr-print'
Vue.use(VueQrPrint);
In your components template:
<template>
<button @click="onStartPrint">Print</button>
...
<qr-print :isStartPrint="isStartPrint"
:qrCodeId="qrCodeId"
:qrCodeIdText="qrCodeIdText"
:isShowQrCodeId="true"
:headerSvg="qrHeaderSvg"
:logoSvg="qrLogoSvg"
:qrSize="qrSize"
:title="qrTitle"
:subtitle="qrSubtitle"
@endPrint="onEndPrint">
</qr-print>
</template>
<script>
export default {
data() {
return {
isStartPrint: false,
qrCodeId: 'qrId',
qrCodeIdText: 'qrIdText',
qrHeaderSvg: '<svg>...</svg>',
qrLogoSvg: '<svg>...</svg>',
qrSize: 's',
qrTitle: 'This is QR Code Title',
qrSubtitle: 'This is QR Code Subtitle'
}
},
methods: {
onStartPrint() {
this.isStartPrint = true;
},
onEndPrint() {
this.isStartPrint = false;
},
}
}
</script>
Props
Prop | Type (Range) | Default | Required |
---|---|---|---|
isStartPrint | Boolean | true |
|
qrCodeId | String | true |
|
qrCodeIdText | String | false |
|
isShowQrCodeId | Boolean | false |
false |
headerSvg | String | false |
|
logoSvg | String | false |
|
qrSize | String (s , m , l ) |
m |
false |
title | String | false |
|
subtitle | String | false |