vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；_热点关注

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

迪丽瓦拉

2025-06-01 04:42:03

0次

生成二维码

- 1. 使用qrcode生成二维码
- - 1.1 安装
  - 1.2 引入
  - 1.3 使用
- 2. 使用vue-qr生成二维码（有icon）
- - 2.1 安装
  - 2.2 引入
  - 2.3 使用
  - 2.4 文档

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

1. 使用qrcode生成二维码

1.1 安装

	npm install --save qrcodejs2

1.2 引入

	//所需页面导入import QRCode from 'qrcodejs2'

1.3 使用

2. 使用vue-qr生成二维码（有icon）

2.1 安装

如果失败了一般是因为这个包依赖canvas，canvas托管在github，国内访问容易超时，解决办法:
https://blog.csdn.net/EverRose/article/details/122846767

	npm install vue-qr --save

2.2 引入

	vue2.x  import vueQr from 'vue-qr'vue3.x  import vueQr from 'vue-qr/src/packages/vue-qr.vue'

2.3 使用

2.4 文档

参数	说明
text	二维码内容（必需）
size	尺寸, 长宽一致, 包含外边距（必需）
margin	二维码图像的外边距, 默认 20px （可选）
dotScale	数据区域点缩小比例, 默认为0.35 （可选）
correctLevel	容错级别 0 - 3 （可选）
whiteMargin	若设为 true, 背景图外将绘制白色边框（默认是true）（可选）
bindElement	指定是否需要自动将生成的二维码绑定到HTML上（默认是true）（可选）
callback	生成的二维码 Data URI 可以在回调中取得, 第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的, 所以加个 id 用于排序)
颜色 –
colorDark	实点的颜色（可选）
colorLight	空白区的颜色（可选）
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark, 默认 true // 若设置了 autoColor，则 colorDark 和 colorLight 都将被忽略。（可选）
背景图像 –
bgSrc	欲嵌入的背景图地址（可选）
gifBgSrc	欲嵌入的背景图 gif 地址, 设置后普通的背景图将失效。设置此选项会影响性能（可选）
backgroundColor	背景色（可选）
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助（可选）
logo图像 –
logoSrc	嵌入至二维码中心的 LOGO 地址（可选）
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式，logoScale(size - 2margin), 默认 0.2 （可选）
logoMargin	标识周围的空白边框, 默认为0 （可选）
logoBackgroundColor	背景色, 需要设置 logo margin （可选）
logoCornerRadius	标识及其边框的圆角半径, 默认为0 （可选）
后处理
binarize	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false （可选）
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值（可选）

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：windows提权之BypassUACDLL劫持引号路径服务权限提权

下一篇：【UML统一建模思想】2万字超详细学习笔记（2）

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

生成二维码

1. 使用qrcode生成二维码

1.1 安装

1.2 引入

1.3 使用

2. 使用vue-qr生成二维码（有icon）

2.1 安装

2.2 引入

2.3 使用

2.4 文档

相关内容

热门资讯