共计 1982 个字符，预计需要花费 5 分钟才能阅读完成。
Vue3NextQrcode
应用 TypeScript 基于 awesome-qr.js 与 Vue3 开发的二维码组件。反对丰盛的配置属性，并且反对：LOGO、BackgroundImage、GIF 等。简略配置，即可应用丑陋难看的二维码～
效果图
动图（GIF）
标记（LOGO）
背景图（BackgroundImage）
装置
npm i vue3-next-qrcodeProps 配置项
| 名称 | 类型 | 默认值 | 阐明 | 版本 | ||
|---|---|---|---|---|---|---|
| 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 状态下的自定义展现款式 | * |
应用示例
根底二维码
<script lang="ts" setup>
import {Vue3NextQrcode} from 'vue3-next-qrcode'
</script>
<template>
根底二维码
<Vue3NextQrcode text="hello" />
LOGO 二维码
<Vue3NextQrcode text="hello" logoImage="your logo image" />
BackgroundImage 二维码
<Vue3NextQrcode text="hello" backgroundImage="your logo image" />
</template>GIF 二维码
留神：应用 GIF URL 的时候，应该应用 gifBackgroundURL 属性。
<script lang="ts" setup>
import {Vue3NextQrcode} from 'vue3-next-qrcode'
</script>
<template>
GIF URL
<Vue3NextQrcode text="hello" gifBackgroundURL="your gif url" />
GIF ArrayBuffer
<Vue3NextQrcode text="hello" gifBackground="your gif ArrayBuffer" />
</template>我的项目地址
vue3-next-qrcode
最初
如果感觉该我的项目对你有帮忙，能够点一个小星星，或者提出你的宝贵意见～
正文完