vue+H5实现扫码条形码及二维码功能_vant 扫码

前言

需求：尽在H5使用Js 完成扫码功能，不依托客户端支持；
思路：使用video吊起后台摄像头 + 条形码解析插件；
本文使用的框架有Vue + Vant + @zxing/library ，提示this.$message等方式不必使用Vant可以用自己框架；

npm install  Vue  Vant  @zxing/library -S
1

效果

代码

<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><
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18