前言
需求:尽在H5使用Js 完成扫码功能,不依托客户端支持;
思路:使用video吊起后台摄像头 + 条形码解析插件;
本文使用的框架有Vue + Vant + @zxing/library ,提示this.$message
等方式不必使用Vant可以用自己框架;
npm install Vue Vant @zxing/library -S
效果
代码
<template>
<section class="section">
<div class="page bgc-f4f4f4">
<video ref="video" id="video" class="video vjs-fluid" autoplay></video>
<div v-show="tipShow" class="tip">{
{tipMsg}}</div>
</div>
<!-- 表单信息展示 没有展示需求可以不用 以上代码已经完成扫码功能 -->
<div class="orderInfo">
<van-cell-group >
<van-field
v-model="value"
center
clearable
label="商品条码"
placeholder="请输入商品条码"
>
<template #button>
<van-button type="info" @click="searchInfo">查询</van-button><