通过vue方式实现二维码扫码功能通过vue方式实现二维码扫码功

提示这个插件只能在https协议下才能访问，http协议不好使，最好用vue2,vue3容易报错！！！！！
描述通过vue的方式，实现扫码功能
参考文档：vue-qrcode-reader去官网–>官方文档
效果展示
文章图片

实现步骤：步骤一（安装插件）

npm install --save vue-qrcode-reader

步骤二（创建组件）
因为可能多个页面都会用到，所以弄成了组件
（1）在src下面的components创建qrcode.vue
（2）代码实现

// qrcode.vue.error {font-weight: bold; color: red; }.cameraMessage {width: 100%; height: 60px; }.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent); background-size: 3rem 3rem; background-position: -1rem -1rem; width: 100%; /* height: 100%; */height: 100vh; /* height: 288px; */position: relative; background-color: #1110; /* background-color: #111; */}/* .qrcode-stream-wrapper {display: flex; justify-content: center; align-items: center; margin-top: 82px; clear: both; } *//* .qrcode-stream-wrapper >>> .qrcode-stream-camera {width: 213px; height: 210px; clear: both; margin-top: 39px; } */.qr-scanner .box {width: 213px; height: 213px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */}.qr-scanner .txt {width: 100%; height: 35px; line-height: 35px; font-size: 14px; text-align: center; /* color: #f9f9f9; */margin: 0 auto; position: absolute; top: 70%; left: 0; }.qr-scanner .myQrcode {text-align: center; color: #00ae10; }.qr-scanner .line {height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33; transform: translateY(-100%); animation: radar-beam 2s infinite alternate; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; }.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before {content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; }.qr-scanner .box:after,.qr-scanner .box:before {top: 0; border-top-color: #00ff33; }.qr-scanner .angle:after,.qr-scanner .angle:before {bottom: 0; border-bottom-color: #00ff33; }.qr-scanner .box:before,.qr-scanner .angle:before {left: 0; border-left-color: #00ff33; }.qr-scanner .box:after,.qr-scanner .angle:after {right: 0; border-right-color: #00ff33; }@keyframes radar-beam {0% {transform: translateY(-100%); }100% {transform: translateY(0); }}

（3）在需要扫码的页面引入