Vue3使用jsbarcode生成条形码，以及循环生成条形码

在Vue 3中，你可以使用jsbarcode库来生成条形码。首先，确保安装了jsbarcode：

npm install jsbarcode

然后，你可以在Vue组件中这样使用jsbarcode：

<template>
  <div>
    <canvas id="barcode"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import JsBarcode from 'jsbarcode';
 
export default {
  setup() {
    const barcode = ref(null);
 
    onMounted(() => {
      JsBarcode("#barcode", "123456789012");
    });
 
    return { barcode };
  }
};
</script>

如果你需要在循环中生成多个条形码，你可以为每个条形码的canvas提供一个唯一的id：

<template>
  <div v-for="item in items" :key="item.id">
    <canvas :id="`barcode-${item.id}`"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import JsBarcode from 'jsbarcode';
 
export default {
  setup() {
    const items = ref([{ id: 1, code: '12345' }, { id: 2, code: '67890' }]);
 
    onMounted(() => {
      items.value.forEach(item => {
        JsBarcode(`#barcode-${item.id}`, item.code);
      });
    });
 
    return { items };
  }
};
</script>

在这个例子中，items数组包含了条形码的数据，每个item都有一个唯一的id和条形码内容code。循环生成条形码时，我们使用item.id来为每个条形码的canvas设置唯一的id，并使用JsBarcode为每个条形码生成对应的内容。