Nuxt 二维码
Nuxt 二维码是一个模块，旨在提供方便的二维码读取和创建支持。
当前路线图
以下是我目前正在开发并计划在未来几天/几周内发布的功能
- 读取二维码
- 提供来自vue-qrcode-reader的上游组件
- 可组合的实用工具（仅限客户端）与上游组件配合使用
- 提供自定义 Nuxt 组件，用有主见的逻辑包装上游组件
- 生成二维码
- 提供来自unjs/uqr的上游
- 可组合的实用工具来生成二维码
- 服务器实用工具（支持 base64 图像）
- 客户端实用工具（支持 base64 图像）
- 提供自定义 Nuxt 组件来渲染二维码
- svg
- png
- ✨ 发布说明
功能
- ✨ 易于使用
- 🔋 内置（有主见的组件）
- 🧩 可扩展（上游组件 + 此模块的实用函数）
- 📷 读取二维码
- 📝 创建二维码
- 📘 Typescript 支持
快速设置
- 将
nuxt-qrcode依赖项添加到您的项目中
# Using pnpm
pnpm add -D nuxt-qrcode
# Using yarn
yarn add --dev nuxt-qrcode
# Using npm
npm install --save-dev nuxt-qrcode
- 将
nuxt-qrcode添加到nuxt.config.ts的modules部分
export default defineNuxtConfig({
modules: [
'nuxt-qrcode'
]
})
就是这样！您现在可以在 Nuxt 应用程序中使用 Nuxt 二维码了 ✨
如何使用它
自定义默认值
您可以在 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 中所有相同的 prop。
QrcodeStream
开箱即用的组件，用于捕获和解码来自设备摄像头的实时馈送。就像这样简单
<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 许可发布。