vue-zxing 识别二维码内容

ZXing，一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的图像处理库。本文主要以解码为主，通过扫描二维码解析内容。

ZXing 网上以java 和 Android 方案居多，官方github也是以java为主，前端实现的文档和案例并不多，由于最近公司业务涉及到扫码识别内容的需求，自己通过ZXing进行二次封装，并发布到npm官方仓库中。

仓库地址：https://www.npmjs.com/package/vue-zxing-zk

一、安装插件

npm i vue-zxing-zk

二、使用 

<template>
  <div class="box">    
      <scan-code :scanConfig="scanConfig" @success="getcode"></scan-code>
  </div>
</template>

<script>
import scanCode from 'vue-zxing-zk'

export default {
	components: {
        scanCode
    },
    data() {
        return {
            scanConfig: {
                color: '#F64847', // 扫描框颜色
                tips: '支持二维码/条形码' // 底部提示文案
            } 
        }
    },
    methods: {
        // 扫码成功回调
        getcode(txt) {
            this.$toast('扫码结果是：' + txt)
        }
    }
}
</script>

提示：ZXing库要用https才能打开摄像头，需在vue.config.js里设置https: true即可，再运行npm run serve 即可打开https协议的地址了。

 ZXing 官方示例：https://zxing-js.github.io/library/

扫码识别条码结果

体验链接(手机端)：https://zk-web-object.oss-cn-qingdao.aliyuncs.com/wxy/code/index.html