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 配置项

名称类型默认值说明版本
watchTextbooleantrue是否启用自动监听内容变换后,重新渲染二维码*
statusQRCodeStatusundefined二维码状态*
errorDescriptionstring \VNode二维码已过期status error 状态下的描述文案*
errorActionDescriptionstring重新加载status error 状态下的按钮描述文案*
textstring必填二维码填充内容*
sizenumber160二维码渲染尺寸*
marginnumber12二维码主体周围的边距大小(以像素为单位)*
correctLevelnumber1二维码纠错等级(0-3)*
maskPatternnumberundefined指定二维码编码时使用的掩码图案,接受QRMaskPattern提供的值*
versionnumberundefined指定二维码编码使用的版本,接受[1-40]整数*
componentsComponentOptions{}用于控制二维码中的组件的选项*
colorDarkstring#000000二维码上方块的颜色*
colorLightboolean#ffffff二维码上方块的颜色*
autoColorbooleantrue自动计算二维码背景的colorLight值*
backgroundImagestringundefined二维码背景图*
backgroundDimmingstringrgba(0, 0, 0, 0)背景图像上方调光蒙版的颜色*
gifBackgroundURLstringundefinedgif 图链接地址*
gifBackgroundArrayBufferundefinedgif 图文件流*
whiteMarginbooleantrue使用白色边距而不是透明边距,透明边距会显示边距上二维码的背景*
logoImagestringundefined二维码 logo*
logoScalenumber0.4logo 与二维码尺寸的比例*
logoMarginnumber6logo 边距尺寸*
logoCornerRadiusnumber8二维码圆角尺寸*
dotScalenumber1块的实际大小与完整大小的比率,当您想要使背景的更多部分可见时,这会很有帮助。*
onSuccess(dataURL: ArrayBuffer \string \undefined) => voidnull二维码渲染成功回调*
onError(e: unknown) => voidnull二维码渲染失败回调*
onReload() => voidnullstatus 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)的资料请关注脚本之家其它相关文章!

相关文章

  • el-tab设置默认激活的标签页实现步骤

    el-tab设置默认激活的标签页实现步骤

    这篇文章主要给大家介绍了关于el-tab设置默认激活的标签页实现步骤,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue select组件绑定的值为数字类型遇到的问题

    vue select组件绑定的值为数字类型遇到的问题

    这篇文章主要介绍了vue select组件绑定的值为数字类型遇到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中常用的缩写方式

    vue中常用的缩写方式

    这篇文章主要介绍了vue中常用的缩写方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Element-UI使用el-row高度设置方式

    Element-UI使用el-row高度设置方式

    这篇文章主要介绍了Element-UI使用el-row高度设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue2和Vue3中常用组件通信用法分享

    Vue2和Vue3中常用组件通信用法分享

    这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,值得收藏
    2023-04-04
  • element日期选择器el-date-picker样式图文详解

    element日期选择器el-date-picker样式图文详解

    最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下
    2022-09-09
  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    仿vue-cli搭建属于自己的脚手架的方法步骤

    这篇文章主要介绍了仿vue-cli搭建属于自己的脚手架的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue-cli监听组件加载完成的方法

    vue-cli监听组件加载完成的方法

    今天小编就为大家分享一篇vue-cli监听组件加载完成的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3+ts+elementui-plus二次封装弹框实战教程

    vue3+ts+elementui-plus二次封装弹框实战教程

    这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • VantUI封装自定义Tabbar路由跳转的实现

    VantUI封装自定义Tabbar路由跳转的实现

    本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05

最新评论