vue-zxing-zk

vue 实现扫码识别结果

Install via NPM/Yarn

npm install vue-zxing-zk

yarn add vue-zxing-zk

Example - basic

<template>
  <scans :scanConfig="scanConfig" @success="getcode"></scans>
</template>

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

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

示例

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

使用方法或体验链接参考我的博客 https://wangxinyan.blog.csdn.net/article/details/130274144?spm=1001.2014.3001.5502