今天，我開始計劃模仿 VueUse 來開發一個自己的 useBarCode 功能。這是一次全新的挑戰，不僅僅是技術上的實踐，更是創造屬於自己的工具。我決定先從需求確認開始，仔細分析 useBarCode 需要達到的目標和功能。

看過許多 VueUse 的函式後，今天我們來規劃自己的 VueUse 吧。不過在開發之前，先來確定開發需求。

簡介

本需求文件描述了 Vue Composition API 函式 useBarCode 的設計和實現需求。useBarCode 是一個模仿 VueUse 函式庫風格的工具，用於生成條碼並返回其 Data URL，方便在 Vue 應用中直接展示條碼圖像。這個函式封裝了基於 JsBarcode 庫的條碼生成邏輯，提供多種自定義選項，適用於產品標識、票券驗證和物流追蹤等多種場景。

背景和目標

• 背景：條碼生成是現代應用中的常見需求，尤其在電商、票券管理和物流追蹤領域，用於追蹤和識別物品。然而，手動生成條碼涉及大量重複性程式碼，因此需要一個專門的工具函式來簡化這一過程。
• 目標：開發一個基於 Vue Composition API 的條碼生成函式 useBarCode，模仿 VueUse 函式風格，並運用 JsBarcode 庫來處理條碼生成。這個工具函式應支持自定義條碼外觀（如寬度、高度、顏色等），並以 Data URL 形式返回結果，方便在 Vue 應用中直接展示。

功能需求

1. 基本功能

   1. useBarCode 函式應接受以下兩個參數：
      • 文本參數（text）：用於生成條碼的文本。支持響應式引用（ref）或 Getter 函數（MaybeRefOrGetter），確保條碼在輸入變化時自動更新。
      • 配置參數（options）：可選參數，用於自定義條碼的外觀和行為。
   2. useBarCode 函式應返回以下內容：
      • barCodeUrl：一個 Vue 的響應式引用 (ref)，存儲條碼的 Data URL。可以在 <img> 標籤中直接使用，以顯示條碼。

2. 條碼生成

   1. 使用 JsBarcode 庫生成條碼，並以 Data URL 形式返回結果。
   2. 條碼生成過程應考慮性能問題，避免阻塞主線程。
   3. 當輸入文本變化時，系統應自動生成新的條碼。

3. 自定義條碼外觀參數

   jsbarcode - npm (npmjs.com)

   useBarCode應支持以下自定義配置參數，這些參數基於JsBarcode提供的功能：

   • format：條碼格式，如 CODE128、EAN、UPC。
   • width：條碼的寬度，預設值為 2。
   • height：條碼的高度，預設值為 100。
   • displayValue：是否顯示條碼下方的文字，預設為 true。
   • text：條碼顯示的文字（若未設置，則顯示輸入的文字）。
   • fontOptions：文字的字體選項（如 "bold"、"italic"）。
   • font：文字的字體類型，預設為 monospace。
   • textAlign：文字的對齊方式（'left'、'center'、'right'）。
   • textPosition：文字顯示的位置（'top' 或 'bottom'）。
   • lineColor：條碼的顏色，預設為 '#000000'。
   • background：條碼的背景顏色，預設為 '#ffffff'。
   • margin：條碼周圍的外邊距，預設為 10。

技術需求

1. Vue Composition API：使用 Vue 的 Composition API 來實現，並返回 Vue 的響應式對象（ref）。
2. JsBarcode：依賴JsBarcode庫生成條碼，並確保所有參數與JsBarcode保持一致。
3. 兼容性：
   • 確保在主流瀏覽器（如 Chrome、Firefox、Safari、Edge）中正常運作。
   • 相容 Vue 3，並善用 Vue 3 的最新特性（如 watch 和 onMounted）來管理條碼生成邏輯。

使用方式(想像中)

會說是想像中主要是因為這是開發前的文件，先想像看看要如何使用再來開發會比較舒服~

以下是希望的使用方式：

import { ref } from 'vue';
import { useBarCode } from './useBarCode';

const text = ref('1234567890');
const { barCodeUrl } = useBarCode(text);

並在模板中使用：

<template>
  <div>
    <input v-model="text" placeholder="輸入要生成的條碼" />
    <img v-if="barCodeUrl" :src="barCodeUrl" alt="條碼" />
  </div>
</template>