在 Vue 中使用 Canvas 绘制二维码可分为以下几个步骤：
- 安装 qrcode 库：
npm install qrcode --save
在 Vue 组件中导入 qrcode 库
import QRCode from 'qrcode';
- 创建 Canvas 元素
<canvas ref="canvas"></canvas>
- 在 Vue 组件的生命周期钩子函数 mounted 中编写 Canvas 绘制二维码的代码
mounted() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) { if (err) throw err; const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = url; }); },
在上面的代码中，我们使用 QRCode 库的 toDataURL 方法生成二维码图片的 base64 编码，并将其转换为 Image 对象，最后在 Canvas 上绘制。
- 样式设置
canvas { width: 200px; height: 200px; border: 1px solid #ccc; }
根据页面的需求，可以设置 Canvas 元素的宽、高和边框等样式。
完整的 Vue 组件代码如下：
<template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import QRCode from 'qrcode'; export default { mounted() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) { if (err) throw err; const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = url; }); } }; </script> <style> canvas { width: 200px; height: 200px; border: 1px solid #ccc; } </style>
