关于 vue3 的 二维码组件（vue3-next-qrcode）

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。
https://ckai.xyz

Vue3NextQrcode

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

效果图

动图（GIF）

标志（LOGO）

背景图（BackgroundImage）

安装

npm i vue3-next-qrcode

Props 配置项

Slots

使用示例

基础二维码

<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

最后

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