Skip to content

Latest commit

 

History

History
111 lines (84 loc) · 8.31 KB

README.zh-CN.md

File metadata and controls

111 lines (84 loc) · 8.31 KB
Raw

npm package LICENSE

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

🪴 项目活动

Alt

贡献者

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

🌸 Thanks

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

📄 证书

MIT License © 2023-PRESENT Ray