vue实现扫条形码,vue h5扫码
最近接了一个移动端的项目，实现微信扫码功能，今天小编利用这个平台给大家分享某视频剪辑软件实现二维码扫描功能的实现代码，需要的朋友参考下吧
需求：
利用某视频剪辑软件实现二维码扫描；
插件：
二维码阅读器
插件下载
新公共管理安装-保存vue-二维码-阅读器
注意：
需要在安全超文本传输协议协议下才可以调用相机，实现扫码。
可以通过配置vue。配置。射流研究…中的devServer:{https:true}
或参照前文章前端使用Nuxt框架，配置本地安全超文本传输协议访问配置本地证书
模板
差异
p class= error“{ error } }/p
！-错误信息-
"解码结果"
扫描结果：
b{{ result }}/b
/p
！-扫描结果-
QR code-stream @ decode= on decode @ init= on init style= height:100 VH；
差异
div class=qr扫描仪
div class=box
div class=line/div
div class=angle/div
/div
/div
/div
/qrcode-stream
/div
/模板
脚本
//下载插件
//cnpm安装-保存vue-二维码-阅读器
//引入
从" vue-二维码阅读器"导入{ QrcodeStream }
导出默认值{
//注册
组件：{ QrcodeStream }，
data() {
返回{
结果： ,//扫码结果信息
错误： //错误信息
}
},
方法：{
onDecode(结果){
警报（结果)
这个。结果=结果
},
异步奥尼特(承诺){
尝试{
等待承诺
} 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
}
}
}
}
}
/脚本
样式范围。错误{
字体粗细：粗体；
颜色：红色；
}
/风格
样式范围
/* * {
边距：0;
填充：0;
}
正文{
高度：700像素
边距：0;
} */。季度扫描仪{
背景图像：
线性梯度(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
位置：相对；
背景色：# 1110;
/*背景色：# 111;*/
}。二维码扫描仪。方框{
宽度：213像素
身高：213像素
位置：绝对；
左：50%;
top:50%；
transform: translate(-50%，-50%)；
溢出：隐藏；
边框：0.1毫米实心rgba(0，255，51，0.2)；
/*背景：URL( http://资源。米色。世界/imgs/宫丛号。png’)无重复中心中心；*/
}。二维码扫描仪。行{
高度：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)；
}
}
/风格
好，下面在一段代码vue项目中实现扫码功能
项目地址：https://github。com/wkl 007/vue-scan-demo。饭桶
项目主要是做的一个扫码的功能
核心代码为
div class=扫描
div id=bcid
div style=height:40%/div
小费.载入中./p
/div
页脚
按钮@click=startRecognize1 .创建控件/按钮
button @click=startScan2 .开始扫描/按钮
按钮@click=取消扫描 3。结束扫描/按钮
button @click=closeScan4 .关闭控件/按钮
/页脚
/div
/模板
脚本类型=text/ecmascript-6
让扫描=空
导出默认值{
data () {
返回{
代码Url:“”，
}
},
方法：{
//创建扫描控件
startRecognize () {
让那个=这个
如果(!window.plus)返回
扫描=新加。条形码。条形码(“bcid”)
scan.onmarked=onmarked
函数onmarked(类型，结果，文件){
开关（类型){
case plus.barcode.QR:
type=QR
破裂
case plus.barcode.EAN13:
type=EAN13
破裂
case plus.barcode.EAN8:
type=EAN8
破裂
默认值：
类型=其它类型
破裂
}
result=result.replace(/\n/g，)
that.codeUrl=result
警报（结果)
that.closeScan()
}
},
//开始扫描
startScan () {
如果(!window.plus)返回
scan.start()
},
//关闭扫描
cancelScan () {
如果(!window.plus)返回
扫描。取消()
},
//关闭条码识别控件
closeScan () {
如果(!window.plus)返回
scan.close()
},
}
}
/脚本
style lang=less 。扫描{
身高：100%;
#bcid {
宽度：100%;
位置：绝对；
左：0;
右：0;
top:0；
底部：3个元素
文本对齐：居中；
颜色：# fff
背景：# ccc
}
页脚{
位置：绝对；
左：0;
底部：1雷姆；
身高：2雷姆；
行高：2雷姆；
z指数：2;
}
}
/风格
到此这篇关于某视频剪辑软件实现扫码功能，带样式的文章就介绍到这了，更多相关某视频剪辑软件扫码功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。