---

欢迎访问我的个人主页: 编程笔录

一、安装所需依赖

组件用到的依赖是 html5-qrcode, 文档地址：https://scanapp.org/html5-qrcode-docs/docs/intro

下载依赖：

 npm install --save-dev html5-qrcode

二、组件代码

<template>
    <div class="reader-box" v-if="isScaning">
        <div class="reader" id="reader"></div>
    </div>
    <div class="stop-scan-btn" v-if="isScaning" @click="stopScan">X</div>
</template>

<script setup name="ScanQrcodeH5">
import { Html5Qrcode } from "html5-qrcode";

// props
const props = defineProps({
     //设置连续聚焦模式
    focusMode: {
        type: String,
        default: 'continuous'
    },
    //设置扫码识别速度
    fps: {
        type: Number,
        default: 5
    },
    //设置二维码扫描框大小
    qrbox: {
        type: Number,
        default: 280
    }
});

// 自定义事件
const emits = defineEmits(['success', 'fail']);

// 是否进行扫描
const isScaning = ref(false);
const h5QrCode = ref();

// 打开扫描方法
const openScan = () => {
    isScaning.value = true;
    Html5Qrcode.getCameras().then((devices) => {
        if (devices?.length) {
            h5QrCode.value = new Html5Qrcode('reader');
            h5QrCode.value.start(
                {
                    facingMode: 'environment'
                },
                {
                    //设置连续聚焦模式
                    focusMode: props.focusMode,
                    //设置扫码识别速度
                    fps: props.fps,
                    //设置二维码扫描框大小
                    qrbox: props.qrbox
                },
                (decodeText, decodeResult) => {
                    //这里decodeText就是通过扫描二维码得到的内容
                    if (decodeText) {
                        // 处理扫描结果
                        emits('success', decodeText);
                        //关闭扫码功能
                        stopScan();
                    }
                },
                (err) => {
                    // 错误信息
                    console.error(err);
                }
            );
        }
    }).catch(e => {
        console.error(e);
        emits('fail', e);
    });
}

// 停止扫描方法
const stopScan = () => {
    console.log('====> 停止扫码')
    isScaning.value = false;
    h5QrCode.value?.stop();
}

// 暴露出属性，供父组件使用
defineExpose({
    openScan,
});
</script>

<style lang="scss" scoped>
.reader-box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}

.reader {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stop-scan-btn {
    position: absolute;
    top: 80rpx;
    left: 80rpx;
    z-index: 1001;
    color:#fff;
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
}
</style>

三、组件参数和方法

1、组件 Props

参数	说明	类型	默认值	可选值
focusMode	连续聚焦模式	String	continuous	-
fps	扫码识别速度	Number	5	-
qrbox	二维码扫描框大小	Number	280	-

2、组件 Events

事件名	说明	回调参数	回调参数说明
success	扫码成功时触发	value	扫描结果
fail	扫码失败时触发	error	失败信息

四、使用示例

1. 新建 ScanQrcodeH5.vue 文件，将组件代码复制进去

2. 在需要使用的地方引入组件并调用组件中的 openScan 方法，进行扫码

3. 扫码结果可通过 success 事件获取

<template>
    <button @click="openScan">开启扫码</button>
    <!-- h5 环境下扫描二维码 -->
    <scan-qrcode-h5 ref="scanQrcodeH5Ref" @success="h5ScanSuccess" @fail="h5ScanFail"></scan-qrcode-h5>
</template>

<script setup name="VTest">
import ScanQrcodeH5 from '@/components/ScanQrCodeH5.vue'

// 扫码组件实例
const scanQrcodeH5Ref = ref();

// 发起扫描
const openScan = () => {
    scanQrcodeH5Ref.value.openScan();
}

// h5 环境下扫描成功
const h5ScanSuccess = async (data) => {
    
    console.log('====> 扫码结果：{}',data);

    //todo 处理扫码成功后的逻辑
}

// h5 环境下扫描失败
const h5ScanFail= async (error) => {
    
    console.log('====> 失败原因：{}',error);

    //todo 处理扫码失败后的逻辑
}
</script>



<style lang="scss" scoped></style>

五、说明

1. 需要在 Https协议 下才能正常使用

2. 主流浏览器都可以使用，但是也有一些浏览器无法使用。具体可以自行测试

3. 如需其他扩展功能可参照 文档 自行封装