vue3移动端摄像头实现扫描二维码功能

最新推荐文章于 2025-11-18 07:16:26 发布

转载最新推荐文章于 2025-11-18 07:16:26 发布 · 806 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_37656005/article/details/135701776

文章标签：

#javascript #开发语言 #ecmascript

vue3移动端调用手机摄像头实现扫描二维码功能

需求：
vue3+vant4 实现移动端网页调用手机摄像头实现扫描二维码，并返回二维码附带信息功能
效果图：

实现方法
采用vue3-qr-reader插件实现

项目安装依赖：

npm install --save vue3-qr-reader

页面引入：

import { QrStream } from 'vue3-qr-reader';
export default defineComponent({
    components: {
        QrStream
    }
})
页面使用：
 <qr-stream @decode="onDecode" class="container">
	<!--扫码识别框的颜色样式-->
   <div style="color: red;" class="contentInner"></div>
</qr-stream>
> 完整代码示例：
 <template>
    <div class="demo">
		<van-nav-bar title="扫一扫" left-text="返回" left-arrow @click-left="onClickLeft" style="background-color: #081c33"  />
		<div class="content">
		    <qr-stream @decode="onDecode" class="container">
		        <div style="color: red;" class="contentInner"></div>
		    </qr-stream>
		    <div class="bottomLight">
		        <img src="@/assets/img/my/light.png" style="width:30px" />
		        <p>轻触照亮</p>
		    </div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, reactive, toRefs } from 'vue'
import { QrStream} from 'vue3-qr-reader';
export default defineComponent({
    name: 'Qrcode',
    components: {
        QrStream
    },
    setup() {
        const onClickLeft = () => history.back();
        const onDecode = (data: any) => {
            console.log(data);//二维码附带信息
        }
        return {
            onDecode,
            onClickLeft,
        }
    }
})
</script>