Vue3 二维码组件

一个可自定义的 Vue 3 二维码组件。

特性

• 完全可自定义（尺寸、颜色、图标）
• TypeScript 支持
• 使用 Vite 构建
• 简单易用
• Vue 3 组合式 API

安装

npm install vue3-qrcode-component

或者

yarn add vue3-qrcode-component

或者

pnpm add vue3-qrcode-component

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import Qrcode from 'vue3-qrcode-component'

const app = createApp(App)
app.use(Qrcode)
app.mount('#app')

<template>
  <Qrcode url="https://github.com" />
</template>

局部注册

<template>
  <Qrcode 
    url="https://vuejs.org"
    :wid="150"
    :hei="150"
    colorDark="#42b983"
    colorLight="#ffffff"
    iconurl="https://cn.vuejs.org/images/logo.png"
    :imgwid="30"
    :imghei="30"
  />
</template>

<script setup lang="ts">
import { Qrcode } from 'vue3-qrcode-component'
</script>

属性配置

| 属性 | 说明 | 类型 | 默认值 | |----------|-------------|------|---------| | url | 二维码输入的内容 | String | 'www.baidu.com' | | iconurl | 二维码中间小图片地址（可选） | String | undefined | | wid | 二维码宽度 | Number | 70 | | hei | 二维码高度 | Number | 70 | | colorDark | 二维码颜色 | String | '#000000' | | colorLight | 二维码背景色 | String | '#ffffff' | | imgwid | 二维码中间小图片宽度 | Number | 30 | | imghei | 二维码中间小图片高度 | Number | 30 | | correctLevel | 容错级别 (0-3: L/M/Q/H) | Number | 3 | | margin | 二维码留白间距（单位：模块数） | Number | 0 |

注意：

• iconurl 是可选参数。如果不传此参数，二维码将不显示中间图标。
• margin 控制二维码周围的留白。设置为 0 时完全铺满无留白，使用 1-4 的值可以提高扫码识别率。

使用示例

基础用法（无图标）

<Qrcode url="https://github.com" />

自定义尺寸和颜色

<Qrcode 
  url="https://vuejs.org"
  :wid="200"
  :hei="200"
  colorDark="#4CAF50"
  colorLight="#E8F5E9"
/>

带中心图标

<Qrcode 
  url="https://cn.vuejs.org"
  iconurl="https://cn.vuejs.org/images/logo.png"
  :wid="200"
  :hei="200"
  :imgwid="40"
  :imghei="40"
/>

自定义留白间距

<!-- 无留白 - 完全铺满 -->
<Qrcode 
  url="https://github.com"
  :wid="200"
  :hei="200"
  :margin="0"
/>

<!-- 最小留白 -->
<Qrcode 
  url="https://github.com"
  :wid="200"
  :hei="200"
  :margin="1"
/>

<!-- 标准留白 - 推荐使用，扫码识别率更高 -->
<Qrcode 
  url="https://github.com"
  :wid="200"
  :hei="200"
  :margin="4"
/>

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 预览构建结果
npm run preview

许可证

MIT

作者

全栈若城

贡献

欢迎贡献代码！请随时提交 Pull Request。