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 库更灵活。
