🏄‍♀️ 示例

✨ 特性

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

📦 安装

1npm i vue3-next-qrcode

🤹‍♀️ 使用

1<script lang="ts" setup>
2import { Vue3NextQrcode } from 'vue3-next-qrcode'
3import 'vue3-next-qrcode/es/style.css'
4</script>
5
6<template>
7  <Vue3NextQrcode text="hello vue3 next qrcode" />
8</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