qrcode
nuxt-qrcode

一个 Nuxt 模块,提供生成和读取二维码的支持。

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.tsmodules 部分
export default defineNuxtConfig({
  modules: [
    'nuxt-qrcode'
  ]
})

就是这样!您现在可以在 Nuxt 应用程序中使用 Nuxt QRCode ✨

如何使用

自定义默认值

您可以在 nuxt.config.ts 中设置默认选项

QrcodeuseQrcode

您可以自定义诸如

  • 默认变体样式
  • 半径(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.tsqrcode.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>

QrcodeCaptrueQrcodeDropZone

请查阅 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 许可发布。