vue項目中實現掃碼功能

項目地址：https://github.com/zmsoft/vue-scan-demo.git
項目主要是做的一個掃碼的功能
核心代碼為

</template>

 <div class="scan">

    <div id="bcid">
      <div style="height:40%"></div>
      <p class="tip">...載入中...</p>
    </div>
    <footer>
      <button @click="startRecognize">1.創建控件</button>
      <button @click="startScan">2.開始掃描</button>
      <button @click="cancelScan">3.結束掃描</button>
 
      <button @click="closeScan">4.關閉控件</button>
    </footer>
  </div>
</template>
 
<script type='text/ecmascript-6'> let scan = null export default { data () { return { codeUrl: '', } }, methods: { // 創建掃描控件
 startRecognize () { let that = this
        if (!window.plus) return scan = new plus.barcode.Barcode('bcid') scan.onmarked = onmarked function 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
            default: type = '其它' + type break } result = result.replace(/\n/g, '') that.codeUrl = result alert(result) that.closeScan() } }, // 開始掃描
 startScan () { if (!window.plus) return scan.start() }, // 關閉掃描
 cancelScan () { if (!window.plus) return scan.cancel() }, // 關閉條碼識別控件
 closeScan () { if (!window.plus) return scan.close() }, } } </script>
<style lang="less"> .scan { height: 100%; #bcid { width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 3rem; text-align: center; color: #fff; background: #ccc; } footer { position: absolute; left: 0; bottom: 1rem; height: 2rem; line-height: 2rem; z-index: 2; } } </style>

 

轉載於:https://www.cnblogs.com/smart-girl/p/11133161.html