使用 Vue 3 和 JsBarcode 开发一维码显示组件

在现代前端开发中，条形码（或称一维码）在许多应用场景中非常常见，例如商品管理、物流跟踪等。本文将介绍如何使用 Vue 3 和 JsBarcode 库来创建一个灵活的一维码显示组件，并展示如何在应用中使用它。

1. 安装必要的依赖

首先，我们需要安装 Vue 3 和 JsBarcode。如果你还没有创建 Vue 3 项目，可以使用 Vue CLI 快速创建一个新项目：

npm install -g @vue/cli
vue create barcode-app
cd barcode-app

然后，安装 JsBarcode：

npm install jsbarcode

2. 创建 BarcodeGenerator 组件

接下来，我们创建一个名为 BarcodeGenerator 的组件，用于生成和显示一维码。

BarcodeGenerator.vue

<template>
  <div>
    <svg ref="barcode"></svg>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import JsBarcode from 'jsbarcode';
import { defineProps } from 'vue';

const props = defineProps({
  value: {
    type: String,
    required: true,
  },
  format: {
    type: String,
    default: 'CODE128',
    validator: (value) => [
      'CODE128',
      'EAN13',
      'EAN8',
      'UPC',
      'CODE39',
      'ITF14',
      'MSI',
      'Pharmacode'
    ].includes(value),
  },
});

const barcode = ref(null);

const generateBarcode = () => {
  if (barcode.value) {
    JsBarcode(barcode.value, props.value, {
      format: props.format,
      lineColor: '#000',
      width: 2,
      height: 100,
      displayValue: true,
    });
  }
};

onMounted(generateBarcode);

watch(() => props.value, generateBarcode);
watch(() => props.format, generateBarcode);
</script>

3. 在应用中使用 BarcodeGenerator 组件

现在，我们可以在应用中使用 BarcodeGenerator 组件。我们将创建一个示例页面，展示不同格式的一维码。

App.vue

<template>
  <div id="app">
    <h1>一维码示例</h1>
    <BarcodeGenerator value="123456789012" format="EAN13"></BarcodeGenerator>
    <BarcodeGenerator value="12345678" format="EAN8"></BarcodeGenerator>
    <BarcodeGenerator value="123456789012" format="UPC"></BarcodeGenerator>
    <BarcodeGenerator value="CODE39EXAMPLE" format="CODE39"></BarcodeGenerator>
    <BarcodeGenerator value="1234567890123" format="ITF14"></BarcodeGenerator>
    <BarcodeGenerator value="123456" format="MSI"></BarcodeGenerator>
    <BarcodeGenerator value="1234" format="Pharmacode"></BarcodeGenerator>
  </div>
</template>

<script setup>
import BarcodeGenerator from './components/BarcodeGenerator.vue';
</script>

4. 运行应用

确保你的项目设置正确，然后运行应用：

npm run serve

访问你的应用，你应该会看到一系列不同格式的一维码。

详细解释

组件定义和道具验证

在 BarcodeGenerator 组件中，我们定义了两个道具：value 和 format。value 是必需的字符串道具，用于生成条形码的数据。format 是可选的字符串道具，指定条形码的格式，默认值为 CODE128。为了确保传入的格式是有效的，我们使用了 validator 函数进行验证。

条形码生成逻辑

我们使用 Vue 3 的组合式 API（<script setup> 语法糖）来定义组件的逻辑。在 setup 函数中，我们创建了一个对 SVG 元素的引用，并定义了 generateBarcode 函数来生成条形码。在组件挂载时（onMounted）以及每次道具变化时（通过 watch 监听道具变化），都会调用 generateBarcode 函数。

应用中的使用

在 App.vue 中，我们引入并使用了 BarcodeGenerator 组件，并传递了不同的 value 和 format 值来展示各种格式的一维码。