Vue输入内容/链接生成二维码
方式一：qrcode（无 icon 图标）
npm i qrcodejs2 --save
完整代码
-
<template
>
-
<div
class
=
"flex-box"
>
-
<div
>qrcode（无 icon 图标）
<
/div
>
-
<div
class
=
"qr-code"
ref
=
"qrCodeUrl"
>
<
/div
>
-
<
/div
>
-
<
/template
>
-
-
<script
>
-
import QRCode
from
'qrcodejs2';
-
-
export
default {
-
dat
a() {
-
return {};
-
},
-
methods: {
-
/
* 创建二维码
*
/
-
creatQrCode() {
-
new QRCode(this.$refs.qrCodeUrl, {
-
text:
'https://blog.csdn.net/AdminGuan',
/
/ 二维码的内容
-
width:
150,
-
height:
150,
-
colorDark:
'#000',
-
colorLight:
'#fff',
-
correctLevel: QRCode.CorrectLevel.H
-
});
-
}
-
},
-
mounted() {
-
this.creatQrCode();
/
/ 创建二维码
-
}
-
};
-
<
/script
>
-
-
<style scoped
>
-
.flex-box {
-
display: flex;
-
align-items: center;
-
justify-content: center;
-
flex-direction:
column;
-
}
-
.qr-code {
-
padding:
10px;
-
margin-top:
20px;
-
background-color: #fff;
-
border:
1px solid red;
-
}
-
<
/style
>
方式二：vue-qr（有 icon 图标）
官网地址：vue-qr - npm
npm install vue-qr --save
import 引入方式
import vueQr from 'vue-qr'; // vue2.0
import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
完整代码
-
<template
>
-
<div
class
=
"flex-box"
>
-
<div
>vue-qr（有 icon 图标）
<
/div
>
-
<vue-qr
class
=
"qr-code" :logoSrc
=
"imageUrl" :text
=
"qrCodeUrl" :
size
=
"150"
/
>
-
<
/div
>
-
<
/template
>
-
-
<script
>
-
import vueQr
from
'vue-qr';
/
/ vue
2.0
-
/
/ import vueQr
from
'vue-qr/src/packages/vue-qr.vue';
/
/ vue
3.0 (support vite)
-
-
export
default {
-
components: { vueQr },
-
dat
a() {
-
return {
-
qrCodeUrl:
'https://blog.csdn.net/AdminGuan',
/
/ 二维码的内容
-
imageUrl: require(
'../assets/default.jpg')
/
/ icon路径
-
};
-
},
-
methods: {}
-
};
-
<
/script
>
-
-
<style scoped
>
-
.flex-box {
-
display: flex;
-
align-items: center;
-
justify-content: center;
-
flex-direction:
column;
-
}
-
.qr-code {
-
margin-top:
20px;
-
background-color: #fff;
-
border:
1px solid red;
-
}
-
<
/style
>
相关配置属性
| 属性名 | 含义 |
|---|---|
| text | 编码内容 |
| correctLevel | 容错级别（0 - 3） |
| size | 尺寸，长宽一致, 包含外边距 |
| margin | 二维码图像的外边距，默认 20px |
| colorDark | 实点的颜色 |
| colorLight | 空白区的颜色 |
| bgSrc | 欲嵌入的背景图地址 |
| gifBgSrc | 欲嵌入的背景图 gif 地址，设置后普通的背景图将失效。设置此选项会影响性能 |
| backgroundColor | 背景色 |
| backgroundDimming | 叠加在背景图上的颜色，在解码有难度的时有一定帮助 |
| logoSrc | 嵌入至二维码中心的 logo 地址 |
| logoScale | 用于计算 logo 大小的值，过大将导致解码失败，logo 尺寸计算公式 logoScale * (size - 2 * margin)，默认 0.2 |
| logoMargin | logo 标识周围的空白边框，默认为 0 |
| logoBackgroundColor | logo 背景色，需要设置 logo margin |
| logoCornerRadius | logo 标识及其边框的圆角半径，默认为 0 |
| whiteMargin | 若设为 true，背景图外将绘制白色边框 |
| dotScale | 数据区域点缩小比例，默认为 0.35 |
| autoColor | 若为 true，图像将被二值化处理，未指定阈值则使用默认值 |
| binarizeThreshold | (0 < threshold < 255) 二值化处理的阈值 |
| callback | 生成的二维码 data url 可以在回调中取得，第一个参数为二维码 data url，第二个参数为 props 传过来的 qid(因为二维码生成是异步的，所以加个 id 用于排序) |
| bindElement | 指定是否需要自动将生成的二维码绑定到 HTML 上，默认是 true |