参考：https://github.com/263613093/vue-plugin-scanner
https://blog.csdn.net/DacingCode/article/details/138714788

vue2:

全局安装：
import scanner from './install';
Vue.use(scanner);

使用：
export default {
  data () {
    return {
      items:[],             //扫码结果
      isStart:false         //是否开启扫码
    }
  },
  mounted(){
  this.startScannerHandler();
  },
  methods:{
    startScannerHandler(){
      if(!this.isStart){
        this._scanner=this.$scanner({callback:v=>{
          this.items.push(v);
        }});
      }else{
        this._scanner.cancel();
      }
      this.isStart=!this.isStart;
    }
  }
}


插件代码：
export default {
  install(Vue) {
    Vue.prototype.$scanner = function (options) {
      var _this = this;
      if (_this._callback) {
        return;
      }
      var opt = Object.assign({
        delay: 1000,  // 时间太短会还没输入完成，根据测试情况修改
        endChar: 'Enter',
        callback: null
      }, options)
      var fn = {
        cancel: function () {
          if (_this._callback)
            document.documentElement.removeEventListener('keypress', _this._callback);
          delete _this._callback;
        }
      };
      _this._callback = function (e) {
        var result = _this._result || '';
        var _start = _this._start || new Date();
        var now = new Date();
        if ((now.getTime() - _start.getTime()) > opt.delay) {
          _start = now;
          result = '';
        }
        var keyVal = `${String.fromCharCode(e.which)}`;
        if (e.key == opt.endChar) {
          _this._result = '';
          opt.callback && opt.callback(result);
          return;
        }
        result += keyVal;
        _this._result = result;
        _this._start = _start;
      };
      document.documentElement.addEventListener('keypress', _this._callback);
      return fn;
    };
  }
};

```javascript
export default {
  install(app) {
    app.config.globalProperties.$scanner = function (options) {
      var _this = this;
      if (_this._callback) {
        return;
      }
      var opt = Object.assign({
        delay: 1000,  // 时间太短会还没输入完成，根据测试情况修改
        endChar: 'Enter',
        callback: null
      }, options)
      var fn = {
        cancel: function () {
          if (_this._callback)
            document.documentElement.removeEventListener('keypress', _this._callback);
          delete _this._callback;
        }
      };
      _this._callback = function (e) {
        var result = _this._result || '';
        var _start = _this._start || new Date();
        var now = new Date();
        if ((now.getTime() - _start.getTime()) > opt.delay) {
          _start = now;
          result = '';
        }
        var keyVal = `${String.fromCharCode(e.which)}`;
        if (e.key == opt.endChar) {
          _this._result = '';
          opt.callback && opt.callback(result);
          return;
        }
        result += keyVal;
        _this._result = result;
        _this._start = _start;
      };
      document.documentElement.addEventListener('keypress', _this._callback);
      return fn;
    };
  }
};
```

 

Vue 3 中使用全局属性：
```javascript
// main.js
import scanner from './scanner'
const app = createApp(App)
app.use(scanner)

// 在组件中使用
this.$scanner({
  callback: (result) => {
    console.log(result)
  }
})
```

另外， 提供组合式 API `useScanner` 组合式函数版本：

```javascript
import { ref } from 'vue'

export function useScanner(options) {
  const scanner = ref(null)

  const initScanner = () => {
    scanner.value = app.config.globalProperties.$scanner(options)
  }

  const cancelScanner = () => {
    if (scanner.value) {
      scanner.value.cancel()
    }
  }

  return {
    initScanner,
    cancelScanner
  }
}
```

这样在 setup 中可以这样使用：
```javascript
setup() {
  const { initScanner, cancelScanner } = useScanner({
    callback: (result) => {
      console.log(result)
    }
  })

  onMounted(() => {
    initScanner()
  })

  onUnmounted(() => {
    cancelScanner()
  })
}
```