vue实现调用摄像头扫描二维码功能

场景

在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能。可能一时间想到的解决方案就是调用微信的sdk，但是这个微信的扫一扫只能在微信里用，而且还需要公众号认证等配置操作。很麻烦。可以但没必要，万一你的h5和公众号没有任何关联，不久徒增烦恼吗？
于是，查阅博客，果然有大佬写过文章。

参考博客：vue扫一扫

效果图

注意：这里本地要用localhost。发布之后要用https的才可以看到。（你的设备也必须有摄像头）

代码实现

安装

npm install @zxing/library --save

封装组件

<template>
  <div class="page-scan">
    <div class="base-line">
      <div class="pullWrap">
        <div class="topTitle">
          <div class="pullTitle">
            <div class="pullName">二维码绑定</div>
            <!-- 绑定状态图标 -->
            <img class="left-icon" src="/static/img/noBind.svg" alt="" v-if="!dataObj.qrCodeId">
            <img class="left-icon" src="/static/img/binded.svg" alt="" v-else>
            <div class="right-part">
              <input :disabled="dataObj.qrCodeId" type="text" v-model="dataObj.qrCodeId" placeholder="请输入二维码ID" v-if="dataObj.qrCodeId">
              <input type="text" v-model="scanTextData.scanText" placeholder="请输入二维码ID" v-else>
              <img src="/static/img/scan.svg" alt="" v-if="!dataObj.qrCodeId">
              <span @click="toScanCode" v-if="!dataObj.qrCodeId">扫码填入</span>
              <span v-if="dataObj.qrCodeId">解绑&l