vue3-next-qrcode 一个关于 vue3 的二维码组件

[xiaodaiguaray]

Vue3NextQrcode

使用 TypeScript 基于 awesome-qr.js 与 Vue3 开发的二维码组件。支持丰富的配置属性，并且支持：LOGO 、BackgroundImage 、GIF 等。简单配置，即可使用漂亮好看的二维码～

效果图

动图（ GIF ）

标志（ LOGO ）

背景图（ BackgroundImage ）

安装

npm i vue3-next-qrcode

使用示例

基础二维码

<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

最后

如果觉得该项目对你有帮助，可以点一个小星星，或者提出你的宝贵意见～