qrcode
nuxt-qrcode

一個 Nuxt 模組，提供生成和讀取二維碼的支援。
10.3K 下載65 星v0.4.8
sandros94sandros94

Nuxt 二維碼

npm versionnpm downloadsLicenseNuxt

Nuxt QRCode 是一個模組，用於在讀取和建立二維碼方面提供輕鬆支援。

當前路線圖

以下是我目前正在開發並計劃在未來幾天/幾周內釋出的功能

  • 讀取二維碼
    • 提供來自 vue-qrcode-reader 的上游元件
    • 與上游元件（僅限客戶端）配合使用的實用程式組合
    • 提供自定義 Nuxt 元件，用有主見的邏輯包裝上游元件
  • 生成二維碼
    • 提供來自 unjs/uqr 的上游
    • 生成二維碼的實用程式組合
      • 伺服器實用程式（支援 base64 影像）
      • 客戶端實用程式（支援 base64 影像）
    • 提供自定義 Nuxt 元件來渲染二維碼
      • svg
      • png
  • ✨  釋出說明

功能

  • ✨  易用性
  • 🔋  內建（有主見的元件）
  • 🧩  可擴充套件（上游元件 + 本模組的實用函式）
  • 📷  讀取二維碼
  • 📝  建立二維碼
  • 📘  Typescript 支援

快速設定

  1. 將 nuxt-qrcode 依賴項新增到您的專案
# Using pnpm
pnpm add -D nuxt-qrcode

# Using yarn
yarn add --dev nuxt-qrcode

# Using npm
npm install --save-dev nuxt-qrcode
  1. 將 nuxt-qrcode 新增到 nuxt.config.ts 的 modules 部分
export default defineNuxtConfig({
  modules: [
    'nuxt-qrcode'
  ]
})

就是這樣！您現在可以在 Nuxt 應用程式中使用 Nuxt QRCode ✨

如何使用

自定義預設值

您可以在 nuxt.config.ts 中設定預設選項

Qrcode 和 useQrcode

您可以自定義諸如

  • 預設變體樣式
  • 半徑（0 表示無，1 表示滿）
  • 以及黑白畫素的 css 顏色
export default defineNuxtConfig({
  modules: ['nuxt-qrcode'],

  qrcode: {
    options: {
      variant: 'pixelated',
      // OR
      variant: {
        inner: 'circle',
        marker: 'rounded',
        pixel: 'rounded',
      },
      radius: 1,
      blackColor: 'currentColor', // 'var(--ui-text-highlighted)' if you are using `@nuxt/ui` v3
      whiteColor: 'transparent',  // 'var(--ui-bg)'
    },
  },
})

使用元件

二維碼

Qrcode 元件只需要一個 value prop 即可工作

<template>
  <div>
    <Qrcode
      value="My string to encode"
      variant="pixelated"
    />
  </div>
</template>

但它也接受 nuxt.config.ts 中 qrcode.options 中所有相同的 props。

QrcodeStream

即用型元件，用於捕獲和解碼來自裝置攝像頭的即時 feed。就像

<template>
  <div>
    <QrcodeStream
      @error="onError"
      @detect="onDetect"
    />
  </div>
</template>

<script setup lang="ts">
import type { DetectedBarcode } from 'nuxt-qrcode'

function onDetect(detectedCodes: DetectedBarcode[]) {
  // do something with decoded qrcodes `DetectedBarcode['rawValue']
}

function onError(err: Error) {
  // do something on stream error
}
</script>

QrcodeCaptrue 和 QrcodeDropZone

請查閱 qrcode.s94.dev 上的文件，瞭解如何使用這些元件。

開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

許可證

根據 MIT 許可釋出。