关于vue3:关于-vue3-的-二维码组件vue3nextqrcode

42次阅读

共计 1982 个字符，预计需要花费 5 分钟才能阅读完成。

Vue3NextQrcode

应用 TypeScript 基于 awesome-qr.js 与 Vue3 开发的二维码组件。反对丰盛的配置属性，并且反对：LOGO、BackgroundImage、GIF 等。简略配置，即可应用丑陋难看的二维码～

效果图

动图（GIF）

标记（LOGO）

背景图（BackgroundImage）

装置

npm i vue3-next-qrcode

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 状态下的自定义展现款式 *

应用示例

根底二维码

<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

最初

如果感觉该我的项目对你有帮忙，能够点一个小星星，或者提出你的宝贵意见～

正文完
vue3
发表至： vue3
2023-09-22
 0
关于vue3:Vue3Nuxt3打造SSR网站应用0到1实现服务端渲染
关于vue3:Vue3中使用各类字体图标的正确姿势本地SVGIconfontFontAwesomeElementPlus
关于vue3:vue3组件常用的通信方式
关于vue3:vue3个人心得概论