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需要真機才能有效 瀏覽器運行時會報錯找不到