二维码作为一种常见的信息传递方式，被广泛应用于各个领域。在前端开发中，我们可以使用 qrcode.js 库来生成二维码。本文将详细介绍如何在 Vue.js 中使用 qrcode.js 生成二维码。
安装 qrcode.js 库
我们可以使用 npm 来安装 qrcode.js：
npm install qrcode
引入 qrcode.js 库
在 Vue.js 组件中，我们可以使用 import 引入 qrcode.js：
import QRCode from 'qrcode';
生成二维码
在 Vue.js 组件中，我们可以使用 qrcode.js 的 toCanvas 或 toDataURL 方法来生成二维码。toCanvas 方法会将二维码渲染到一个 Canvas 元素中，而 toDataURL 方法会返回一个 Base64 编码的图片地址。
toCanvas 方法
下面是使用 toCanvas 方法生成二维码的代码示例：
-- -------------------- ---- -------
----------
-----
------- ----------------------
------
-----------
--------
------ ------ ---- ---------
------ ------- -
--------- -
----- ------ - ------------------
----------------------- -------------------------- -------- ------- -
-- ------- ---------------------
---
-
-
---------在 mounted 钩子函数中，我们通过 this.$refs.canvas 获取到 canvas 元素，然后使用 QRCode.toCanvas 方法将二维码渲染到 canvas 中。
toDataURL 方法
下面是使用 toDataURL 方法生成二维码的代码示例：
-- -------------------- ---- -------
----------
-----
---- ---------------- ------- ------
------
-----------
--------
------ ------ ---- ---------
------ ------- -
------ -
------ -
---------- ---
-
--
--------- -
------------------------------------------- -------- ------- ---- -
-- ------- ---------------------
-------------- - ----
--------------
-
-
---------在 mounted 钩子函数中，我们使用 QRCode.toDataURL 方法生成二维码图片的 Base64 编码地址，并将其赋值给组件的数据 qrCodeUrl。然后在模板中使用 img 元素来显示二维码图片。
自定义二维码样式
qrcode.js 还提供了一些方法来自定义二维码的样式。比如，我们可以使用 setDraw方法来修改二维码的颜色。
下面是一个修改二维码颜色的代码示例：
-- -------------------- ---- -------
----------
-----
------- ----------------------
------
-----------
--------
------ ------ ---- ---------
------ ------- -
--------- -
----- ------ - ------------------
----------------------- -------------------------- -
------ -
----- ------- -- -------
------ ------- -- ------
--
-- -------- ------- -
-- ------- ---------------------
---
-
-
---------在 QRCode.toCanvas 方法中，我们传入了一个 options 参数，用于设置二维码的样式。其中，color 对象用于设置二维码和背景色。
总结
本文介绍了如何在 Vue.js 中使用 qrcode.js 生成二维码，并提供了详细的代码示例。通过本文的学习，读者可以掌握使用 qrcode.js 生成二维码的方法，并了解如何自定义二维码的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c0cf695b1f8cacd6231d6