Vue项目中是使用qrcodejs2插件生成二维码

在 Vue3 项目中集成 `qrcodejs2` 来生成二维码是一个简单而有效的任务。以下是详细的步骤及说明： --- ### **Vue3 中使用 qrcodejs2 的步骤** #### **1. 安装依赖** 虽然 `qrcodejs2` 是基于原生 JavaScript 开发的库，但它可以直接通过 `<script>` 标签引入或作为模块安装。 如果你更喜欢通过 npm 管理包，则可以执行以下命令： ```bash npm install qrcodejs2 --save ``` 如果不想全局安装也可以直接下载并引用 [QRCode.js](https://github.com/davidshimjs/qrcodejs) 文件到你的前端项目中。 --- #### **2. 创建 QRCode 组件** 为了保持代码整洁性和复用性，在 Vue3 中建议将二维码功能封装成独立组件。 **示例：创建名为 QrCode.vue 的文件** ```vue <template> <div ref="qrCodeDiv" style="width: 200px; height: 200px;"></div> </template> <script setup> import { onMounted, ref } from "vue"; // 引入 qrcodejs2 库 import QRCode from 'qrcodejs2'; const qrCodeDiv = ref(null); onMounted(() => { const qrcode = new QRCode(qrCodeDiv.value, { text: "https://www.example.com", // 需要转换为二维码的内容 (URL 或文本) width: 200, height: 200, colorDark : "#000000", colorLight : "#ffffff" }); }); </script> ``` 在这个例子中： - 我们绑定了一个 DOM 元素给 `ref("qrCodeDiv")`。 - 利用了 `onMounted` 生命周期钩子确保页面挂载完成后初始化二维码插件实例，并传入对应的配置选项如内容 (`text`) 和宽高等属性值。 --- #### **3. 调整样式和传递动态数据** 你可以进一步优化这个组件使其支持接收 props 动态设置二维码信息，例如 URL 地址、尺寸大小以及颜色自定义等功能。 更新后的版本如下所示： ```vue <template> <div ref="qrCodeDiv"></div> </template> <script setup> import { onMounted, ref, defineProps } from "vue"; import QRCode from 'qrcodejs2'; const props = defineProps({ content: String, // 将显示于二维码内的文字或链接地址 size: Number // 指定宽度与高度，默认单位像素(px) }); const qrCodeDiv = ref(null); let options; if (!props.content || !props.size){ throw Error('Missing required property'); } options = { text: props.content ?? '', // 默认为空字符串处理 width: props.size ?? 200, height: props.size ?? 200, }; onMounted(() => { if(!qrCodeDiv.value){ return;} const instance = new QRCode(qrCodeDiv.value, {...options}); }) </script> ``` 此时就可以像下面这样轻松地渲染出不同规格下的二维码了： ```html <QrCode :content="'http://custom-url-here'" :size="150"/> ``` --- ### 注意事项 - 如果需要兼容 IE 浏览器，请确认是否已解决 polyfill 相关的问题； - 对比官方文档验证最新 API 改动情况； ---