vue实现生成二维码

Vue 中生成二维码的实现方法

在 Vue 项目中生成二维码可以通过以下两种主流方式实现，分别基于 qrcode 和 vue-qrcode 库。

方法一：使用 qrcode 库

安装依赖：

npm install qrcode

组件示例：

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

<script>
import QRCode from 'qrcode'

export default {
  data() {
    return {
      qrCodeData: ''
    }
  },
  mounted() {
    this.generateQRCode('https://example.com')
  },
  methods: {
    async generateQRCode(text) {
      try {
        this.qrCodeData = await QRCode.toDataURL(text)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

特性：

• 支持生成 DataURL、SVG 或 Canvas 格式
• 可自定义颜色、纠错等级等参数
• 需要手动处理图像渲染

方法二：使用 vue-qrcode 组件

安装依赖：

npm install @chenfengyuan/vue-qrcode

组件示例：

<template>
  <vue-qrcode :value="qrText" :size="200" />
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'

export default {
  components: { VueQrcode },
  data() {
    return {
      qrText: 'https://example.com'
    }
  }
}
</script>

特性：

• 开箱即用的组件化方案
• 支持响应式尺寸调整
• 内置错误校正功能
• 支持点击事件绑定

参数自定义

两种方式均支持以下常见参数配置：

• color：设置二维码颜色（十六进制值）
• backgroundColor：设置背景色
• errorCorrectionLevel：纠错等级（L/M/Q/H）
• margin：设置边距（像素值）

示例（vue-qrcode）：

<vue-qrcode 
  :value="qrText" 
  :size="300"
  foreground="#6200ea"
  background="#f5f5f5"
  error-correction-level="H"
/>

注意事项

• 移动端需确保二维码尺寸不小于 100px
• 复杂内容可能导致识别率下降，建议使用短链接
• 生产环境建议添加 loading 状态处理
• 敏感信息需配合加密方案使用

两种方案均支持 SSR（服务端渲染），选择时可根据项目复杂度决定。简单场景推荐 vue-qrcode，需要深度定制时选择 qrcode 库更灵活。