vue3-barcode-qrcode-reader
Advanced tools
Comparing version 1.0.14 to 1.0.15
{ | ||
"name": "vue3-barcode-qrcode-reader", | ||
"version": "1.0.14", | ||
"version": "1.0.15", | ||
"description": "Vue 3 barcodes and QR codes scanner", | ||
@@ -44,4 +44,5 @@ "type": "module", | ||
"@zxing/library": "^0.20.0", | ||
"vue": "^3.3.4", | ||
"vue-demi": "^0.14.6" | ||
"vue": "^3.3.11", | ||
"vue-demi": "^0.14.6", | ||
"vue-router": "^4.2.5" | ||
}, | ||
@@ -48,0 +49,0 @@ "devDependencies": { |
@@ -94,7 +94,92 @@ # Vue3 Barcode and QR code scanner | ||
## Implementation use Ref component | ||
### Script | ||
```ts | ||
import { ref } from 'vue' | ||
import { type Result, StreamQrcodeBarcodeReader } from 'vue-barcode-reader' | ||
const decode = ref<Result | undefined>(undefined) | ||
const isLoading = ref<boolean>(false) | ||
function onResult(data: Result | undefined): void { | ||
decode.value = data | ||
} | ||
function onLoading(loading: boolean) { | ||
isLoading.value = loading | ||
} | ||
// define ref for component | ||
const refCamera = ref<InstanceType<typeof StreamQrcodeBarcodeReader> | null>(null) | ||
function handleOnCanPlay() { | ||
refCamera.value?.onCanPlay() | ||
} | ||
function handleOnReset() { | ||
refCamera.value?.onReset() | ||
} | ||
function handleFacemode() { | ||
refCamera.value?.onChangeFacemode() | ||
} | ||
function handleOnCanStop() { | ||
refCamera.value?.onCanStop() | ||
} | ||
``` | ||
### HTML | ||
```html | ||
<div class="flex justify-center items-center mt-10"> | ||
<template v-if="isLoading"> | ||
<button class="bg-yellow-300 px-6 py-1 rounded-md me-4" @click="handleFacemode"> | ||
Facemode | ||
</button> | ||
<button class="bg-red-300 px-6 py-1 rounded-md" @click="handleOnCanStop">Stop</button> | ||
</template> | ||
<template v-else> | ||
<button class="bg-green-300 px-6 py-1 rounded-md" @click="handleOnCanPlay">Stream</button> | ||
<button v-if="decode" class="bg-blue-300 px-6 py-1 rounded-md" @click="handleOnReset"> | ||
Reset | ||
</button> | ||
</template> | ||
</div> | ||
<div class="flex flex-col items-center justify-center mt-6"> | ||
<pre>Result:{{ decode }}</pre> | ||
<div class="phone mt-6"> | ||
<div class="notch-container"> | ||
<div class="notch"></div> | ||
</div> | ||
<div class="content"> | ||
<template v-if="!isLoading"> | ||
<h1 class="text-xl mb-2">Reader Barcode & QRCode</h1> | ||
<h2 class="text-base text-red-500 capitalize mb-4">mode: shoot</h2> | ||
</template> | ||
<StreamQrcodeBarcodeReader | ||
ref="refCamera" | ||
capture="shoot" | ||
show-on-stream | ||
@onloading="onLoading" | ||
@result="onResult" | ||
/> | ||
</div> | ||
</div> | ||
</div> | ||
``` | ||
## Props | ||
| Parameter | value | Type | Description | | ||
| :-------: | :-----------------: | :--: | ------------- | | ||
| capture | "shoot" or "stream" | emun | Props capture | | ||
| Parameter | value | Type | Description | | ||
| :------------: | :-----------------: | :-----: | ------------------------------------------------------------------------------------------------------- | | ||
| show-on-stream | true or false | Boolean | Props for show or hide button stream if you want implementation use Ref component or maybe another case | | ||
| capture | "shoot" or "stream" | emun | Props capture | | ||
@@ -195,3 +280,3 @@ ### shoot | ||
```ts | ||
import { Result } from 'vue-barcode-reader' | ||
import type { Result } from 'vue-barcode-reader' | ||
const resultScan = ref<Result | undefined>(undefined) | ||
@@ -198,0 +283,0 @@ function onResult(result: Result | undefined) { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1049403
291
5
+ Addedvue-router@^4.2.5
+ Added@vue/devtools-api@6.6.4(transitive)
+ Addedvue-router@4.4.5(transitive)
Updatedvue@^3.3.11