Vue + Barcode 实现扫一维码二维码

<template>
  <div class="scan">
    <div id="bcid"></div>
    <div class="back-arrow" @click="clickIndexLeft">
      <van-icon name="arrow-left" color="#fff" />
    </div>
  </div>
</template>

<script>
let scan = null;
export default {
  data() {
    return {
    };
  },
  async mounted() {
    await this.startRecognize();
    await this.startScan();
  },
  methods: {
    //创建扫描控件
    startRecognize() {
      if (!window.plus) return;
      //filter 扫描类型
      var filter = [
        plus.barcode.CODE128, // CODE128: Code128条形码，数值为10
        plus.barcode.EAN13, // EAN13: EAN条形码标准版，数值为1
        plus.barcode.EAN8, // EAN8: ENA条形码简版，数值为2
        plus.barcode.QR, // QR: QR二维码，数值为0
      ];
      // 提示plus方法要进行真机测试
      scan = new plus.barcode.Barcode("bcid", filter, {
        top: `0px`,
        left: '0px',
        height: `100%`,
        width: '100%',
        position: 'absolute',
        background: '#00ff33',
        frameColor: '#00ff33',
        scanbarColor: '#00ff33',
      });
      scan.onmarked = (type, result, file) => {
        switch (type) {
          case plus.barcode.QR:
            type = "QR";
            break;
          case plus.barcode.EAN13:
            type = "EAN13";
            break;
          case plus.barcode.EAN8:
            type = "EAN8";
            break;
          case plus.barcode.CODE128:
            type = "EAN8";
            break;
          default:
            type = "其它" + type;
            break;
        }
        this.clickIndexLeft(`${type}===${result}`)
      }
    },
    // 开始扫描
    startScan() {
      if (!window.plus) return
      scan.start();
    },
    // 关闭控件
    closeScan() {
      if (!window.plus) return;
      scan.close();
    },
    // 关闭扫描
    cancelScan() {
      if (!window.plus) return;
      scan.cancel();
    },
    // 返回上一页
    clickIndexLeft(result) {
      this.cancelScan();
      this.closeScan();
      this.$route.params.result = result
      this.$router.back()
    }
  },
  destroyed() {
    this.cancelScan();
    this.closeScan();
  }
};
</script>

<style lang="scss">
.scan {
  width: 100%;
  height: 100vh;
  .back-arrow {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}
#bcid {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
}
</style>

　　

plus需要真机才能有效 浏览器运行时会报错找不到