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

embedded/2024/11/14 11:53:12/

在现代前端开发中，条形码（或称一维码）在许多应用场景中非常常见，例如商品管理、物流跟踪等。本文将介绍如何使用 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 函数。