Nuxt 二维码
Nuxt QRCode 是一个模块,用于在读取和创建二维码方面提供轻松支持。
当前路线图
以下是我目前正在开发并计划在未来几天/几周内发布的功能
- 读取二维码
- 提供来自 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 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 许可发布。