vue扫描二维码

需求：

利用vue实现二维码扫描；

插件：

QRCodeReader；

插件下载

npm install --save  vue-qrcode-reader

注意：

需要在https协议下才可以调用相机，实现扫码。
可以通过配置vue.config.js中的devServer:{https:true}
或参照前文章 前端使用Nuxt框架，配置本地https访问 配置本地证书

代码：

<template>
    <div>
        <p class="error">{{ error }}</p><!--错误信息-->

        <p class="decode-result">扫描结果: <b>{{ result }}</b></p><!--扫描结果-->

        <qrcode-stream @decode="onDecode" @init="onInit" />
    </div>
</template>

<script>

    //下载插件
    //cnpm install --save  vue-qrcode-reader

    //引入
    import { QrcodeStream } from 'vue-qrcode-reader';

    export default {

        //注册
        components: { QrcodeStream },

        data () {
            return {
                result: '',//扫码结果信息
                error: '',//错误信息
            }
        },

        methods: {
            
            onDecode (result) {
                alert(result);
                this.result = result
            },

            
            async onInit (promise) {
                try {
                    await promise
                } catch (error) {
                    if (error.name === 'NotAllowedError') {
                        this.error = "ERROR: 您需要授予相机访问权限"
                    } else if (error.name === 'NotFoundError') {
                        this.error = "ERROR: 这个设备上没有摄像头"
                    } else if (error.name === 'NotSupportedError') {
                        this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)"
                    } else if (error.name === 'NotReadableError') {
                        this.error = "ERROR: 相机被占用"
                    } else if (error.name === 'OverconstrainedError') {
                        this.error = "ERROR: 安装摄像头不合适"
                    } else if (error.name === 'StreamApiNotSupportedError') {
                        this.error = "ERROR: 此浏览器不支持流API"
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .error {
        font-weight: bold;
        color: red;
    }
</style>