在現代前端開發中，條形碼（或稱一維碼）在許多應用場景中非常常見，例如商品管理、物流跟蹤等。本文將介紹如何使用 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 值來展示各種格式的一維碼。