Vue-scan-code NPM

vue-scan使用指南 vue-scan是基于vue开发的一款web扫码枪vue插件

使用 - 基本使用

在项目的main.js中引入vue-scan-code插件，入下图

import Vue from 'vue'
import vueScanCode from 'vue-scan-code'

const options = {
    scanName: 'scan', // default 'scan' 初始化挂在vue原型上的名称： 如 scanName = 'scantest' 那么在vue实例中this.$scantest可以获取该实例
    scanWait: 30, // default 30(ms) 应用接收扫码枪的频率，默认30ms,性能低的机器可适当增加该值
    scanCodeMinLength: 5 // default 5 接收条码的最小长度,当条码长度小于该值时，不做任何响应
}
Vue.use(vueScanCode, options)

new Vue({
    ...
})

在需要绑定扫码监听的组件上

组件 mine.vue

<template>
    <div></div>
</template>

export default {
    mounted () {
    this.$scan.bindScanCode(this, (code) => {
        console.log('条形码是：', code)
    })
    },
    destroyed () {
    this.$scan.offScanCode(this)
    }
}

<style lang="less">
</style>

this['$'+ options.scanName].bindScanCode(this, callback)
绑定组件的扫码监听 
   该方法有两个参数，第一个为当前组件的上下文this, 第二个是回调函数callback

this['$'+ options.scanName].offScanCode(this)
// 解除组件的扫码监听 
该方法只有一个参数，当前组件的上下文this

注意在当页面应用中，如果你没有解除逐渐的扫码监听， 当你离开绑定组件扫码组件页面进行扫码，依然可以接收和触发绑定的事件

当多个组件绑定扫码监听时，以最后绑定的监听为主。

github repositories