|
|
@ -20,16 +20,18 @@ |
|
|
|
</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- |
|
|
|
Play with display options: https://qr-code-styling.com/ |
|
|
|
See docs: https://www.npmjs.com/package/qr-code-generator-vue3 |
|
|
|
--> |
|
|
|
<QRCodeVue3 |
|
|
|
:value="this.qrValue" |
|
|
|
:cornersSquareOptions="{ type: 'extra-rounded' }" |
|
|
|
:dotsOptions="{ type: 'square' }" |
|
|
|
class="flex justify-center" |
|
|
|
/> |
|
|
|
<div @click="onCopyToClipboard()"> |
|
|
|
<!-- |
|
|
|
Play with display options: https://qr-code-styling.com/ |
|
|
|
See docs: https://www.npmjs.com/package/qr-code-generator-vue3 |
|
|
|
--> |
|
|
|
<QRCodeVue3 |
|
|
|
:value="this.qrValue" |
|
|
|
:cornersSquareOptions="{ type: 'extra-rounded' }" |
|
|
|
:dotsOptions="{ type: 'square' }" |
|
|
|
class="flex justify-center" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h1 class="text-4xl text-center font-light pt-4">Scan Contact Info</h1> |
|
|
|
<qrcode-stream @detect="onScanDetect" @error="onScanError" /> |
|
|
@ -40,6 +42,7 @@ |
|
|
|
import QRCodeVue3 from "qr-code-generator-vue3"; |
|
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
import { QrcodeStream } from "vue-qrcode-reader"; |
|
|
|
import { useClipboard } from "@vueuse/core"; |
|
|
|
|
|
|
|
import { accountsDB, db } from "@/db/index"; |
|
|
|
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
|
|
@ -179,5 +182,22 @@ export default class ContactQRScanShow extends Vue { |
|
|
|
-1, |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
onCopyToClipboard() { |
|
|
|
useClipboard() |
|
|
|
.copy(this.qrValue) |
|
|
|
.then(() => { |
|
|
|
console.log("Contact URL:", this.qrValue); |
|
|
|
this.$notify( |
|
|
|
{ |
|
|
|
group: "alert", |
|
|
|
type: "toast", |
|
|
|
title: "Copied", |
|
|
|
text: "Contact URL was copied to clipboard.", |
|
|
|
}, |
|
|
|
2000, |
|
|
|
); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|