vue实现移动端扫一扫功能（带样式）
前言：
最近在做一个
vue2的项目，其中有个需求是，通过扫一扫功能，扫二维码进入获取到对应的code，根据code值获取接口数据。在移动端开发中，扫一扫功能是一个非常实用的特性。它可以帮助用户快速获取信息、进行支付、添加好友等操作。而
Vue作为一种流行的前端框架，为我们实现移动端扫一扫功能提供了强大的支持。本文将详细介绍如何使用
Vue实现移动端扫一扫功能，并为其添加个性化的样式。
一、需要实现的效果图
二、背景
我这边的需求是，需要在移动端使用扫一扫功能进行物品的盘点。由于有的地方环境比较暗，所以要兼具“可开关手机手电筒”的功能，即上图中的“轻触点亮”。
本文主要介绍：
- 运用
vue-qrcode-reader插件实现扫一扫功能；- 实现打开手电筒功能；
- 按照上图中的设计稿实现样式，并且中间蓝色短线是上下扫描的视觉效果。
三、下载并安装插件
- 可参考
vue-qrcode-reader官网。 - 在项目
install这个插件：
npm install --save vue-qecode-reader
或者
cnpm install --save vue-qrcode-reader
- 然后就可以在代码中引入了：
import { QrcodeStream } from 'vue-qrcode-reader';
components: {
QrcodeStream
},
html中的结构可以这样写：
附上代码可直接复制：
<template>
<div class="saoma">
<qrcode-stream
:torch="torchActive"
@decode="onDecode"
@init="onInit"
style="height: 100vh; width:100vw">
<div>
<div class="qr-scanner">
<div class="box">
<div class="line">div>
<div class="angle">div>
<div @click="openTorch" class="openTorch">
<img src="@/assets/imgs/icon_torch.png" />
<div>轻触点亮div>
div>
div>
div>
div>
qrcode-stream>
div>
template>
API介绍可参考vue-qrcode-reader API介绍
js中主要包含两个通用的事件和一个“轻触点亮”的事件：
注：
我这边的这个扫码页面，会根据情况分别跳转到两个页面，所以做了区分。
实现打开手电筒的功能时，要先自定义一个变量torchActive，将初始值设置为false,同时要注意在onDecode方法中，要重置为false。
下面将js的全部代码附上：
CSS可参考下面的代码，其中中间那条蓝色的短线是动态上线扫描的效果：
注：
- 颜色可自定义（我这边的主色是蓝色，可根据自己项目调整）；
- 我的项目用的
css语法是less，也可根据自己项目修改。
这就是实现这个页面功能的全部代码了～
四、总结
读者可以通过本文介绍，根据自己的需求进行定制和扩展。无论是为了提高用户体验还是满足特定的业务需求，这个功能都能为你的移动端应用增添不少价值。
以上，希望对大家有帮助！
作者：小蹦跶儿
来源：juejin.cn/post/7436275126742712372
来源：juejin.cn/post/7436275126742712372
