二维码

Vue 二维码生成和扫描工具。

qrcode.vue

基本信息

• 简介: Vue 3 二维码组件
• 链接: https://github.com/scopewu/qrcode.vue
• npm: qrcode.vue

特点

• ✅ Vue 3 组件
• ✅ 支持 Logo
• ✅ 自定义样式
• ✅ Canvas/SVG 渲染

安装

pnpm

pnpm add qrcode.vue

bun

bun add qrcode.vue

npm

npm install qrcode.vue

yarn

yarn add qrcode.vue

基础用法

扫描二维码访问：https://www.google.com

<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'

const value = ref('https://www.google.com')
</script>

<template>
  <QrcodeVue 
    :value="value" 
    :size="200"
    level="H"
  />
</template>

自定义颜色

扫描二维码访问：https://www.google.com

<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'

const value = ref('https://www.google.com')
</script>

<template>
  <QrcodeVue 
    :value="value" 
    :size="200"
    level="H"
    foreground="#4F46E5"
    background="#EEF2FF"
  />
</template>

带 Logo

扫描二维码访问：https://www.google.com

使用 Google 图标作为中心图标

<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'

const value = ref('https://www.google.com')
</script>

<template>
  <QrcodeVue 
    :value="value" 
    :size="300"
    :margin="2"
    level="H"
    render-as="canvas"
    :image-settings="{
      src: 'https://www.google.com/favicon.ico',
      width: 60,
      height: 60,
      excavate: true
    }"
  />
</template>

---

vue-qrcode-reader

基本信息

• 简介: Vue 二维码扫描组件
• 链接: https://gruhn.github.io/vue-qrcode-reader/
• GitHub: https://github.com/gruhn/vue-qrcode-reader

特点

• ✅ 摄像头扫描
• ✅ 文件上传扫描
• ✅ 拖放扫描
• ✅ 实时检测

安装

pnpm

pnpm add vue-qrcode-reader

bun

bun add vue-qrcode-reader

npm

npm install vue-qrcode-reader

yarn

yarn add vue-qrcode-reader

基础用法

<script setup lang="ts">
import { QrcodeStream } from 'vue-qrcode-reader'

const onDecode = (result: string) => {
  console.log('扫描结果:', result)
}

const onError = (error: Error) => {
  console.error('扫描错误:', error)
}
</script>

<template>
  <QrcodeStream 
    @decode="onDecode"
    @error="onError"
  />
</template>

摄像头扫描

需要获取摄像头权限才能使用扫描功能

<template>
  <div class="space-y-4">
    <!-- 权限请求 -->
    <div v-if="!hasPermission" class="flex flex-col items-center gap-4 p-6 bg-gray-50 rounded-lg">
      <p class="text-sm text-gray-600 text-center">
        需要获取摄像头权限才能使用扫描功能
      </p>
      <button 
        @click="requestPermission"
        :disabled="isRequesting"
        class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors disabled:opacity-50"
      >
        {{ isRequesting ? '⏳ 请求权限中...' : '📷 获取摄像头权限' }}
      </button>
    </div>

    <!-- 扫描控制 -->
    <div v-else>
      <button 
        @click="isScanning = !isScanning"
        class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
      >
        {{ isScanning ? '⏸️ 停止扫描' : '📷 开始扫描' }}
      </button>
    </div>
    
    <!-- 扫描区域 -->
    <div v-if="isScanning && hasPermission" class="relative bg-gray-900 rounded-lg overflow-hidden" style="height: 400px;">
      <QrcodeStream 
        @decode="onDecode"
        @error="onError"
      />
      <div class="absolute top-4 left-4 right-4 bg-black/50 text-white p-3 rounded-lg text-sm">
        请将二维码对准摄像头
      </div>
    </div>
    
    <!-- 扫描结果 -->
    <div v-if="result" class="p-4 bg-green-50 border border-green-200 rounded-lg">
      <p class="text-sm font-medium text-green-800 mb-2">扫描成功！</p>
      <p class="text-sm text-green-700 break-all">{{ result }}</p>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg">
      <p class="text-sm font-medium text-red-800 mb-2">权限错误</p>
      <p class="text-sm text-red-700">{{ error }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeStream } from 'vue-qrcode-reader'

const hasPermission = ref(false)
const isRequesting = ref(false)
const isScanning = ref(false)
const result = ref('')
const error = ref('')

const requestPermission = async () => {
  isRequesting.value = true
  error.value = ''
  
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      video: { facingMode: 'environment' } 
    })
    
    // 获取权限成功，停止流
    stream.getTracks().forEach(track => track.stop())
    hasPermission.value = true
  } catch (err: any) {
    error.value = err.message || '无法获取摄像头权限'
    hasPermission.value = false
  } finally {
    isRequesting.value = false
  }
}

const onDecode = (decodedString: string) => {
  result.value = decodedString
  error.value = ''
  isScanning.value = false
}

const onError = (err: Error) => {
  error.value = err.message
  result.value = ''
}
</script>

文件上传扫描

<script setup lang="ts">
import { QrcodeCapture } from 'vue-qrcode-reader'

const onDetect = (detectedCodes: any[]) => {
  console.log('检测到的二维码:', detectedCodes)
}
</script>

<template>
  <QrcodeCapture @detect="onDetect" />
</template>

---

@vueuse/integrations (useQRCode)

基本信息

• 简介: VueUse 集成的二维码生成
• 链接: https://vueuse.org/integrations/useQRCode/
• GitHub: https://github.com/vueuse/vueuse

特点

• ✅ 响应式二维码
• ✅ 基于 qrcode
• ✅ 简单易用
• ✅ TypeScript 支持

安装

pnpm

pnpm add @vueuse/integrations qrcode

bun

bun add @vueuse/integrations qrcode

npm

npm install @vueuse/integrations qrcode

yarn

yarn add @vueuse/integrations qrcode

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { useQRCode } from '@vueuse/integrations/useQRCode'

const text = ref('https://www.google.com')
const qrcode = useQRCode(text)
</script>

<template>
  <div>
    <img :src="qrcode" alt="QR Code" />
    <input v-model="text" placeholder="输入内容" />
  </div>
</template>

自定义选项

<script setup lang="ts">
import { ref } from 'vue'
import { useQRCode } from '@vueuse/integrations/useQRCode'

const text = ref('https://www.google.com')
const qrcode = useQRCode(text, {
  errorCorrectionLevel: 'H',
  type: 'image/png',
  quality: 0.95,
  margin: 4,
  width: 300,
  color: {
    dark: '#000000',
    light: '#FFFFFF'
  }
})
</script>

<template>
  <img :src="qrcode" alt="QR Code" />
</template>

---

qrcode (原生库)

基本信息

• 简介: Node.js 二维码生成库
• 链接: https://github.com/soldair/node-qrcode
• npm: qrcode

特点

• ✅ 框架无关
• ✅ 支持多种输出格式
• ✅ Canvas/SVG/终端
• ✅ 功能强大

安装

pnpm

pnpm add qrcode

bun

bun add qrcode

npm

npm install qrcode

yarn

yarn add qrcode

Canvas 渲染

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'

const canvas = ref<HTMLCanvasElement | null>(null)

onMounted(() => {
  if (canvas.value) {
    QRCode.toCanvas(canvas.value, 'https://www.google.com', {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
  }
})
</script>

<template>
  <canvas ref="canvas"></canvas>
</template>

SVG 渲染

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'

const svgContainer = ref<HTMLDivElement | null>(null)

onMounted(async () => {
  if (svgContainer.value) {
    const svgString = await QRCode.toString('https://www.google.com', {
      type: 'svg',
      width: 200,
      margin: 2
    })
    svgContainer.value.innerHTML = svgString
  }
})
</script>

<template>
  <div ref="svgContainer"></div>
</template>

Data URL

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'

const dataUrl = ref('')

onMounted(async () => {
  dataUrl.value = await QRCode.toDataURL('https://www.google.com', {
    width: 200,
    margin: 2
  })
})
</script>

<template>
  <img :src="dataUrl" alt="QR Code" />
</template>

---

对比选择

特性	qrcode.vue	vue-qrcode-reader	@vueuse/integrations	qrcode
功能	生成	扫描	生成	生成
Vue 3 组件	✅	✅	✅	❌
TypeScript	✅	✅	✅	✅
响应式	⚠️	-	✅	❌
Logo 支持	✅	-	❌	❌
自定义样式	✅	⚠️	✅	✅
摄像头扫描	-	✅	-	-
文件上传	-	✅	-	-
Canvas/SVG	✅	-	⚠️	✅
框架无关	❌	❌	❌	✅

推荐使用场景

qrcode.vue

• ✅ 需要 Vue 组件化使用
• ✅ 需要自定义样式和颜色
• ✅ 需要在二维码中添加 Logo
• ✅ 需要 Canvas/SVG 渲染选择

vue-qrcode-reader

• ✅ 需要扫描二维码
• ✅ 需要使用摄像头实时扫描
• ✅ 需要上传图片扫描
• ✅ 需要拖放文件扫描

@vueuse/integrations

• ✅ 需要响应式二维码
• ✅ 已使用 VueUse 生态
• ✅ 需要简单快速的实现
• ✅ 需要自动更新二维码

qrcode

• ✅ 需要框架无关的方案
• ✅ 需要多种输出格式
• ✅ 需要在 Node.js 中使用
• ✅ 需要最大的灵活性