vue扫码枪扫描二维码,vue调用扫码功能
这篇文章给大家介绍了通过某视频剪辑软件的方式，实现扫码功能，实现步骤分为两步，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
提示
这个插件只能在安全超文本传输协议协议下才能访问，http协议不好使，最好用vue2，vue3容易报错！
描述
通过某视频剪辑软件的方式，实现扫码功能
参考文档：vue-二维码阅读器去官网官方文档
效果展示
实现步骤：
步骤一（安装插件）
新公共管理安装-保存vue-二维码-阅读器
步骤二（创建组件）
因为可能多个页面都会用到，所以弄成了组件
(1)在科学研究委员会下面的成分创建qrcode.vue
(2)代码实现
//qrcode.vue
模板
差异
！-p class= error"{ error } }/p-
！-错误信息-
！- p class=decode-result
扫描结果：
b{{ result }}/b
/p -
！-扫描结果-
！- p @click=openCamera 打开相机/p
div v-show= show class=相机消息
p @click=closeCamera 关闭相机/p
p @click=openFlash 打开手电筒/p
p @click=switchCamera 相机反转/p
/div -
二维码-流
v-show=二维码
:camera=camera
:torch= torchActive
@decode=onDecode
@init=onInit
差异
div class=qr扫描仪
div class=box
div class=line/div
div class=angle/div
/div
div class=txt
将二维码/条码放入框内，即自动扫描
div class=myQrcode 我的二维码/div
/div
/div
/div
/qrcode-stream
/div
/模板
脚本
//下载插件
//cnpm安装-保存vue-二维码-阅读器
//引入
从" vue-二维码阅读器"导入{二维码流}；
导出默认值{
//注册
组件：{ QrcodeStream }，
data() {
返回{
结果： ,//扫码结果信息
错误： ,//错误信息
//show: false，
//qrcode: false，
二维码：真的，
假的，
摄像头："正面",
};
},
方法：{
onDecode(结果){
console.log(结果);
这个. result=结果
},
异步奥尼特(承诺){
const { capabilities }=等待承诺；
const TORCH_IS_SUPPORTED=！能力.火炬
尝试{
等待承诺；
} catch(错误){
如果(错误。name===不允许的错误){
this.error=错误：您需要授予相机访问权限；
} else if(错误。name===未找到错误){
this.error=错误：这个设备上没有摄像头；
} else if(错误。name=== NotSupportedError ){
this.error=错误：所需的安全上下文(HTTPS，本地主机);
} else if(错误。name=== NotReadableError ){
this.error=错误：相机被占用；
} else if(错误。name=== OverconstrainedError ){
this.error=错误：安装摄像头不合适；
} else if(错误。name=== streamapinotsupporterror ){
this.error=错误：此浏览器不支持流API ；
}
}
},
//打开相机
//openCamera() {
//this.camera=rear
//this.qrcode=true
//this.show=true
//},
//关闭相机
//closeCamera() {
//this.camera=off
//this.qrcode=false
//this.show=false
//},
//打开手电筒
//openFlash() {
//switch (this.torchActive) {
//大小写为真：
//this.torchActive=false
//中断
//大小写错误：
//this.torchActive=true
//中断
//}
//},
//相机反转
//switchCamera() {
////控制台。日志(这个。相机)；
//切换(this.camera) {
//case front :
//this.camera=rear
//console.log(this.camera)
//中断
//case rear :
//this.camera=front
//console.log(this.camera)
//中断
//}
//}
},
};
/脚本
样式范围。错误{
字体粗细：粗体；
颜色：红色；
}。照相机信息{
宽度：100%;
高度：60px
}。季度扫描仪{
背景图像：线性梯度（
0度，
透明24%,
rgba(32，255，77，0.1) 25%，
rgba(32，255，77，0.1) 26%，
透明27%,
透明74%,
rgba(32，255，77，0.1) 75%，
rgba(32，255，77，0.1) 76%，
透明77%,
透明的
),
线性梯度（
90度，
透明24%,
rgba(32，255，77，0.1) 25%，
rgba(32，255，77，0.1) 26%，
透明27%,
透明74%,
rgba(32，255，77，0.1) 75%，
rgba(32，255，77，0.1) 76%，
透明77%,
透明的
);
背景尺寸：3rem 3rem
背景-位置：-1雷姆-1雷姆；
宽度：100%;
/*身高：100%;*/
身高：100vh
/*高度：288像素*/
位置：相对；
背景色：# 1110;
/*背景色：# 111;*/
}
/* .qrcode-stream-wrapper {
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
边距-顶部：82px
明确：两者都有；
} */
/* .二维码-流-包装。二维码-流-相机{
宽度：213像素
身高：210像素
明确：两者都有；
边距-顶部：39px
} */。二维码扫描仪。方框{
宽度：213像素
身高：213像素
位置：绝对；
左：50%;
top:50%；
transform: translate(-50%，-50%)；
溢出：隐藏；
边框：0.1毫米实心rgba(0，255，51，0.2)；
/*背景：URL( http://资源。米色。世界/imgs/宫丛号。png’)无重复中心中心；*/
}。二维码扫描仪. txt {
宽度：100%;
高度：35px
行高：35px
字体大小：14px
文本对齐：居中；
/*颜色：# f9f9f 9；*/
边距：0自动；
位置：绝对；
top:70%；
左：0;
}。二维码扫描仪。我的二维码{
文本对齐：居中；
颜色：# 00ae10
}。二维码扫描仪。行{
高度：calc(100%-2px)；
宽度：100%;
背景：线性梯度(180度，rgba(0，255，51，0) 43%，# 00ff 33 211%)；
边框-底部：3px solid # 00ff 33
transform:平移y(-100%)；
动画：雷达-波束2s无限交替；
动画-计时-函数：三次-贝塞尔(0.53,0,0.43,0.99);
动画-延迟：1.4s
}。二维码扫描仪。框：之后，二维码扫描仪。盒子：之前，二维码扫描仪。角度：之后，二维码扫描仪。角度：之前{
内容："";
显示：块；
位置：绝对；
宽度：3vw
身高：3vw
边框：0.2红色纯色透明；
}。二维码扫描仪。框：之后，二维码扫描仪。框：之前{
top:0；
边框-顶部-颜色：# 00ff33
}。二维码扫描仪。角度：之后，二维码扫描仪。角度：之前{
底部：0;
border-bottom-color:# 00ff 33；
}。二维码扫描仪。盒子：之前，二维码扫描仪。角度：之前{
左：0;
border-left-color:# 00ff 33；
}。二维码扫描仪。框：之后，二维码扫描仪。角度：在{
右：0;
border-right-color:# 00ff 33；
}
@关键帧雷达波束{
0% {
transform:平移y(-100%)；
}
100% {
transform:平移y(0)；
}
}
/风格
(3)在需要扫码的页面引入
//
从" @/components/qrcode.vue "导入二维码；
(4)注册组件
//
组件：{
vue-qrcode: qrcode，
},
(5)使用组件
//在需要展示二维码的地方进行渲染
vue-二维码/
//如果上面这个不好使，可以用下面这个
vue-二维码/vue-二维码
关于vue实现二维码扫描功能的这篇文章到此为止。更多关于vue二维码扫描的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。