vue扫条码实现

最新推荐文章于 2025-03-03 14:07:40 发布

榴莲豆包

最新推荐文章于 2025-03-03 14:07:40 发布

阅读量2.1k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_41992943/article/details/121939487

版权

本文介绍如何在Vue.js应用中集成条形码扫描功能，通过JavaScript库进行实时摄像头捕获并解析条码，实现高效的商品录入或库存管理解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install vue-barcode-reader --save

<template>
  <div>
    <v-header title="扫一扫"/>
    <StreamBarcodeReader
      @decode="logIt"
      @loaded="onLoaded"
  ></StreamBarcodeReader>
  </div>
</template>
 
<script>
import {StreamBarcodeReader} from "vue-barcode-reader";
import Header from "@/common/_header.vue";
 
export default {
  name: 'VueBarcodeTest',
  components: {
    "v-header": Header,
    StreamBarcodeReader
  },
  data () {
    return {
      readerSize: {
        width: 640,
        height: 480
      },
      detecteds: []
    }
  },
  methods: {
    logIt (data) {
      // this.$router.push({
      //         path: "/indexes?barcode=" + encodeURI(data.codeResult.code),
      //       });
      var _this = this;
      let collecdatas = {
          code: data
        };
        t