Browse Source

add ability to copy the QR code (even though we don't have a way to read it in yet)

kb/add-usage-guide
Trent Larson 1 year ago
parent
commit
1be10b1511
  1. 40
      src/views/ContactQRScanShowView.vue

40
src/views/ContactQRScanShowView.vue

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

Loading…
Cancel
Save