看似簡單的動作，其實包含著識別、解析和轉換的過程。每次掃描一個 QR 碼，都像是在尋找隱藏的資訊，解讀那些肉眼無法直接看到的內容。

前情提要

useQRCode 是 VueUse 中用於生成 QR Code 的工具，能夠根據輸入文字生成對應的QR Code。本文將詳細介紹其功能、參數和使用範例，並給出應用場景的建議。

useQRCode API

功能

useQRCode 可以將文字內容轉換為 QR Code 圖片，並以 Data URL 的形式返回，方便直接展示在頁面中。有豐富的設定參數來控制生成的 QR Code 外觀，比如尺寸、顏色、容錯率等，滿足不同的業務需求。

Props

options 參數

useQRCode 的 options 是基於 qrcode 庫的配置，用於自定義 QR Code 的外觀和行為，以下列出常用的選項：

返回值

useQRCode 返回一個包含以下屬性的對象：

用法範例

範例 1：基本用法

以下是一個基本用法的範例，展示如何使用 useQRCode 生成 QR Code 並顯示在頁面中。

<template>
  <div>
    <input v-model="text" placeholder="輸入要生成的文字"/>
    <div v-if="qrCodeUrl">
      <img :src="qrCodeUrl" alt="QR Code" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useQRCode } from '@vueuse/core'

const text = ref('<https://vueuse.org>')

const { qrCodeUrl } = useQRCode(text)
</script>

範例 2：自定義 QR Code 外觀

以下範例展示如何自定義 QR Code 的外觀，例如改變顏色和尺寸。

<template>
  <div>
    <input v-model="text" placeholder="輸入要生成的文字"/>
    <div v-if="qrCodeUrl">
      <img :src="qrCodeUrl" alt="QR Code" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useQRCode } from '@vueuse/core'

const text = ref('Hello World!')

const { qrCodeUrl } = useQRCode(text, {
  width: 300,
  color: {
    dark: '#1a73e8',   // 深藍色
    light: '#ffffff'   // 白色
  },
  errorCorrectionLevel: 'H'  // 高容錯率
})
</script>

useQRCode 的使用場景

1. 連結分享：可以快速生成 URL 的 QR Code，方便用戶掃描並打開連結，例如活動邀請或資料下載。
2. 資訊編碼：將資訊（如憑證、身份識別碼等）生成 QR Code，以便掃描快速輸入，增加便捷性。
3. 產品標識：在產品展示頁面中生成 QR Code，方便用戶掃描查看產品資訊。
4. 訪客簽到：用於活動或會議簽到，生成每位參與者的個人 QR Code，進行快速驗證。

為什麼開發者需要 useQRCode

1. 簡化開發流程：useQRCode 封裝了複雜的 QR Code 生成邏輯，開發者可以輕鬆生成 QR Code，無需手動處理圖片轉換和格式。
2. 高自定義性：useQRCode 支持豐富的自定義選項，例如尺寸、顏色、容錯級別等，滿足不同應用場景的需求。
3. 即時響應：通過 Vue 的響應式系統，useQRCode 可以根據輸入文字的變化自動重新生成 QR Code，增強用戶體驗。
4. 提升用戶體驗：QR Code 生成在現代應用中非常普遍，例如付款、分享、簽到等，useQRCode 能夠提升應用的互動性和便利性。

結論

useQRCode是一個蠻方便的工具，它提供了簡潔的 API 和豐富的設定選項，讓開發者能輕鬆生成 QR Code 並客製化其外觀，無需編寫繁瑣的額外程式碼。善用useQRCode，不僅能提升應用的易用性，更能大幅改善用戶體驗。

如果對 useQRCode 有任何問題或需要補充的部分，請隨時告訴我！