vue3的二维码组件vue3-next-qrcode

更新时间：2023年09月24日 16:13:17 作者：XiaoDaiGua_Ray

这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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-next-qrcode）的详细内容，更多关于vue3 的二维码组件（vue3-next-qrcode）的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue项目打包自动更新版本号且自动刷新缓存的方法示例
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2024-11-11
vue-cli3项目在IE浏览器打开兼容问题及解决
这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue router安装及使用方法解析
这篇文章主要介绍了Vue router安装及使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
Vue项目打包压缩的实现(让页面更快响应)
这篇文章主要介绍了Vue项目打包压缩的实现(让页面更快响应),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue实现前端控制动态路由的示例代码
本文主要介绍了vue实现前端控制动态路由的示例代码,通过这些步骤,可以有效地根据用户权限动态渲染前端路由,实现多用户权限系统,感兴趣的可以了解一下
2025-04-04
vue插件--仿微信小程序showModel实现模态提示窗功能
这篇文章主要介绍了vue插件--仿微信小程序showModel实现模态提示窗,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
element-ui如何在table中使用tooltip
这篇文章主要介绍了element-ui如何在table中使用tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vuex 单状态库与多模块状态库详解
这篇文章主要介绍了Vuex 单状态库与多模块状态库详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
Vue3菜单展开和收起实现
在Vue项目中实现首页布局,包括可收放的左侧菜单和主体内容区,在store中管理菜单状态,通过修改isCollapse状态控制菜单的展开与收起,在home.vue中编写左侧菜单栏的代码和样式,实现一个响应式的用户界面
2024-09-09
解决vue页面刷新，数据丢失的问题
这篇文章主要介绍了解决vue页面刷新，数据丢失的问题，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11