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