Barcode Scanner Plugin for Vue.js
npm install vue-barcode-scannerjavascript
npm install vue-barcode-scanner
`
----------------------------------------
Initiate
Inject plugin to your vue instance by `Vue.use` then initial it in your component that need to use barcode scanner
Default Injection
`javascript
import Vue from 'vue'
import VueBarcodeScanner from 'vue-barcode-scanner'
...
// inject vue barcode scanner
Vue.use(VueBarcodeScanner)
`
Inject with option
`javascript
// inject barcode scanner with option (add sound effect)
// sound will trigger when it's already scanned
let options = {
sound: true, // default is false
soundSrc: '/static/sound.wav', // default is blank
sensitivity: 300, // default is 100
requiredAttr: true, // default is false
controlSequenceKeys: ['NumLock', 'Clear'], // default is null
callbackAfterTimeout: true // default is false
}
Vue.use(VueBarcodeScanner, options)
`
* Please note that if "requiredAttr" set to "true" you need to specific some input field with "data-barcode" and then only this input response to scanner
* controlSequenceKeys: when a control key in this list is encountered in a scan sequence, it will be replaced with tags for easy string replacement
* callbackAfterTimeout: this will fire the callback defined in the component once sensitivity ms has elapsed, following the last character in the barcode sequence. This is useful for scanners that don't end their sequences with ENTER and is backwards compatible with scanners that do.
----------------------------------------
Methods
$3
Init method use for add event listener (keypress) for the scanner.
`javascript
this.$barcodeScanner.init(callbackFunction, options)
`
options defaults to an empty object, {}, and can be safely ignored. See Advanced Usage for an example.
$3
Destroy method is for remove the listener when it's unnecessary.
`javascript
this.$barcodeScanner.destroy()
`
$3
Return the value that currently has a listener or not.
`javascript
this.$barcodeScanner.hasListener() // return Boolean
`
$3
Return last barcode scanned whatever your input is (In textbox currently).
The last barcode will be replace when hit enter key.
`javascript
this.$barcodeScanner.getPreviousCode() // return String
`
$3
Set limit of the time elapsed between each key stroke to distinguish between human typing and barcode scanner.
Barcode scanner is determined by how fast between each key stoke.
Argument is number of milliseconds.
`javascript
this.$barcodeScanner.setSensitivity(200) // sets barcode scanner recognition sensitivity to 200 ms
`
----------------------------------------
Usage
In your component file (.vue) just for the component you need to listener for barcode.
`javascript
export default {
created () {
// Add barcode scan listener and pass the callback function
this.$barcodeScanner.init(this.onBarcodeScanned)
},
destroyed () {
// Remove listener when component is destroyed
this.$barcodeScanner.destroy()
},
methods: {
// Create callback function to receive barcode when the scanner is already done
onBarcodeScanned (barcode) {
console.log(barcode)
// do something...
},
// Reset to the last barcode before hitting enter (whatever anything in the input box)
resetBarcode () {
let barcode = this.$barcodeScanner.getPreviousCode()
// do something...
}
}
}
`
$3
`javascript
export default {
data: () => ({
loading: false
}),
created () {
// Pass an options object with eventBus: true to receive an eventBus back
// which emits start and finish events
const eventBus = this.$barcodeScanner.init(this.onBarcodeScanned, { eventBus: true })
if (eventBus) {
eventBus.$on('start', () => { this.loading = true })
eventBus.$on('finish', () => { this.loading = false })
}
},
destroyed () {
// Remove listener when component is destroyed
this.$barcodeScanner.destroy()
},
methods: {
// Create callback function to receive barcode when the scanner is already done
onBarcodeScanned (barcode) {
console.log(barcode)
// do something...
},
// Reset to the last barcode before hitting enter (whatever anything in the input box)
resetBarcode () {
let barcode = this.$barcodeScanner.getPreviousCode()
// do something...
}
}
}
``