3.0.2 • Published 9 months ago

vue3-next-qrcode v3.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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 配置项

名称类型默认值说明版本
watchTextbooleantrue是否启用自动监听内容变换后,重新渲染二维码*
statusQRCodeStatusundefined二维码状态*
errorDescriptionstring | VNode二维码已过期status error 状态下的描述文案*
errorActionDescriptionstring重新加载status error 状态下的按钮描述文案*
textstring必填二维码填充内容*
sizenumber160二维码渲染尺寸*
marginnumber12二维码主体周围的边距大小(以像素为单位)*
correctLevelnumber1二维码纠错等级(0-3)*
maskPatternnumberundefined指定二维码编码时使用的掩码图案,接受QRMaskPattern提供的值*
versionnumberundefined指定二维码编码使用的版本,接受1-40整数*
componentsComponentOptions{}用于控制二维码中的组件的选项*
colorDarkstring#000000二维码上方块的颜色*
colorLightboolean#ffffff二维码上方块的颜色*
autoColorbooleantrue自动计算二维码背景的colorLight*
backgroundImagestringundefined二维码背景图*
backgroundDimmingstringrgba(0, 0, 0, 0)背景图像上方调光蒙版的颜色*
gifBackgroundURLstringundefinedgif 图链接地址*
gifBackgroundArrayBufferundefinedgif 图文件流*
whiteMarginbooleantrue使用白色边距而不是透明边距,透明边距会显示边距上二维码的背景*
logoImagestringundefined二维码 logo*
logoScalenumber0.4logo 与二维码尺寸的比例*
logoMarginnumber6logo 边距尺寸*
logoCornerRadiusnumber8二维码圆角尺寸*
dotScalenumber1块的实际大小与完整大小的比率,当您想要使背景的更多部分可见时,这会很有帮助。*
onSuccess(dataURL: ArrayBuffer | string | undefined) => voidnull二维码渲染成功回调*
onError(e: unknown) => voidnull二维码渲染失败回调*
onReload() => voidnullstatus error 状态下点击重新加载按钮回调,如果使用了 errorAction 插槽该方法不会执行*

🔧 Slots

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

🪴 项目活动

Alt

贡献者

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

🌸 Thanks

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

📄 证书

MIT License © 2023-PRESENT Ray

3.0.2

9 months ago

3.0.1

9 months ago

3.0.0

9 months ago

2.0.10

1 year ago

2.0.7

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.6

1 year ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.0.0

2 years ago