提示
这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!!
描述
通过vue的方式,实现扫码功能
参考文档:vue-qrcode-reader去官网–>官方文档
效果展示
实现步骤:
步骤一(安装插件)
npm install --save vue-qrcode-reader
步骤二(创建组件)
因为可能多个页面都会用到,所以弄成了组件
(1)在src下面的components创建qrcode.vue
(2)代码实现
// qrcode.vue
<template>
<div>
<!-- <p class="error">{
{ error }}</p> -->
<!--错误信息-->
<!-- <p class="decode-result">
扫描结果:
<b>{
{ result }}</b>
</p> -->
<!--扫描结果-->
<!-- <p @click="openCamera">打开相机</p>
<div v-show="show" class="cameraMessage">
<p @click="closeCamera">关闭相机</p>
<p @click="openFlash">打开手电筒</p>
<p @click="switchCamera">相机反转</p>
</div> -->
<qrcode-stream
v-show="qrcode"
:camera="camera"
:torch="torchActive"
@decode="onDecode"
@init=