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

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

最初

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