vue2 使用qrCode2生成二维码，扫码后回显编号

### 实现 Vue2 中使用 qrcodejs2 库生成可扫码回显编号的二维码 为了在 Vue2 项目中实现这一需求，需先安装 `qrcodejs2` 插件。通过命令行工具运行如下指令完成安装： ```bash npm install qrcodejs2 ``` 接着，在组件内部定义用于存储二维码容器 DOM 节点引用以及待编码 URL 的数据属性。创建一个名为 `generateQRCode` 方法来处理二维码生成逻辑，并将其绑定至特定事件触发器上。 #### 组件模板部分 编写 HTML 结构并预留放置二维码图像的位置，同时准备输入框供用户录入想要编码的信息（此处假设为编号），按钮点击后调用上述提到的方法进行渲染操作。 ```html <template> <div class="container"> <!-- 输入区域 --> <input v-model="numberInput" placeholder="请输入编号..." /> <!-- 按钮 --> <button @click="generateQRCode">生成二维码</button> <!-- 显示区 --> <div id="qrcode-container"></div> </div> </template> ``` #### JavaScript 部分 导入必要的依赖项并将之前提及的数据与方法加入其中。注意这里采用异步方式确保视图更新完毕后再执行后续动作以避免潜在错误[^4]。 ```javascript <script> import QRCode from 'qrcodejs2'; export default { name: "QrCodeGenerator", data() { return { numberInput: '', // 用户输入的编号 }; }, methods: { generateQRCode() { this.$nextTick(() => { let el = document.getElementById('qrcode-container'); if (el.innerHTML !== '') { el.innerHTML = ''; // 清除旧有内容防止重复叠加 } new QRCode(el, { text: `${this.numberInput}`, // 将用户输入作为文本参数传递给构造函数 width: 150, height: 150, colorDark : "#000000", // 黑色模块颜色 colorLight : "#ffffff",// 白色背景颜色 correctLevel : QRCode.CorrectLevel.H // 容错级别 H(最高) }); }); } }, }; </script> ``` 此段代码实现了基本功能——接收用户输入并通过 `qrcodejs2` 构建相应图形表示形式；当用户提交有效数值时，该应用程序能够即时响应并呈现对应的结果。此外，考虑到不同浏览器间的差异性问题，建议选用经过修复版本的库文件以增强跨平台稳定性[^3]。