vue3-next-qrcode

English | 简体中文

一个关于 vue3 的 QR Code 组件，支持 LOGO GIF 等丰富属性。支持 SSR！

🏄‍♀️ 示例

✨ 特性

• 🏄🏼‍♂️ 简单易用
• 🛸 丰富的配置属性
• 🏟️ 覆盖大部分业务场景
• 🎯 使用 TypeScript 构建，提供完整的类型定义文件

📦 安装

npm i vue3-next-qrcode

🤹‍♀️ 使用

<script lang="ts" setup>
import { Vue3NextQrcode } from 'vue3-next-qrcode'
import 'vue3-next-qrcode/es/style.css'
</script>

<template>
  <Vue3NextQrcode text="hello vue3 next qrcode" />
</template>

🤺 Props 配置项

| 名称 | 类型 | 默认值 | 说明 | 版本 | | ---------------------- | ----------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------- | -------- | | watchText | boolean | true | 是否启用自动监听内容变换后，重新渲染二维码 | * | | status | QRCodeStatus | undefined | 二维码状态 | * | | errorDescription | string | VNode | 二维码已过期 | status error 状态下的描述文案 | * | | errorActionDescription | string | 重新加载 | status error 状态下的按钮描述文案 | * | | text | string | 必填 | 二维码填充内容 | * | | size | number | 160 | 二维码渲染尺寸 | * | | margin | number | 12 | 二维码主体周围的边距大小（以像素为单位) | * | | correctLevel | number | 1 | 二维码纠错等级（0-3） | * | | maskPattern | number | undefined | 指定二维码编码时使用的掩码图案，接受QRMaskPattern提供的值 | * | | version | number | undefined | 指定二维码编码使用的版本，接受[1-40]整数 | * | | components | ComponentOptions | {} | 用于控制二维码中的组件的选项 | * | | colorDark | string | #000000 | 二维码上方块的颜色 | * | | colorLight | boolean | #ffffff | 二维码上方块的颜色 | * | | autoColor | boolean | true | 自动计算二维码背景的colorLight值 | * | | backgroundImage | string | undefined | 二维码背景图 | * | | backgroundDimming | string | rgba(0, 0, 0, 0) | 背景图像上方调光蒙版的颜色 | * | | gifBackgroundURL | string | undefined | gif 图链接地址 | * | | gifBackground | ArrayBuffer | undefined | gif 图文件流 | * | | whiteMargin | boolean | true | 使用白色边距而不是透明边距，透明边距会显示边距上二维码的背景 | * | | logoImage | string | undefined | 二维码 logo | * | | logoScale | number | 0.4 | logo 与二维码尺寸的比例 | * | | logoMargin | number | 6 | logo 边距尺寸 | * | | logoCornerRadius | number | 8 | 二维码圆角尺寸 | * | | dotScale | number | 1 | 块的实际大小与完整大小的比率，当您想要使背景的更多部分可见时，这会很有帮助。 | * | | onSuccess | (dataURL: ArrayBuffer | string | undefined) => void | null | 二维码渲染成功回调 | * | | onError | (e: unknown) => void | null | 二维码渲染失败回调 | * | | onReload | () => void | null | status error 状态下点击重新加载按钮回调，如果使用了 errorAction 插槽该方法不会执行 | * |

🔧 Slots

| 名称 | 参数 | 说明 | 版本 | | ----------- | -------- | ------------------------------- | -------- | | errorAction | () | status error 状态下的自定义插槽 | * | | loading | () | status loading 状态下自定义插槽 | 2.0.4 |

🪴 项目活动

贡献者

感谢他们的所做的一切贡献 🐝 ！

🌸 Thanks

该项目基于 awesome-qr.js 开发

📄 证书

MIT License © 2023-PRESENT Ray