vue二维码
# vue二维码
# 1. vue-qr生成二维码(已使用)
安装
npm install vue-qr --save导入
import vueQr from 'vue-qr'使用
// logoSrc为logo的url地址(使用require的方式)；text为需要转换为二维码的内容，margin为白色边框
<vue-qr :logoSrc="imageUrl" text="xxx" :size="200" :margin="0"></vue-qr>
<script>
export default {
name: "qecode",
data() {
return {
imageUrl: require("../assets/logo.png"),
}
},
components: {
vueQr
},
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2. qrcode生成二维码
安装
npm install --save qrcodejs2导入
import QRCode from 'qrcodejs2'使用
<div class="qrcode" ref="qrCodeUrl"></div>
<script>
methods: {
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: 'xxxx', // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
},
mounted() {
this.creatQrCode();
},
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
样式（这里再提供一个给二维码添加边框的小技巧：如下图所示，我们生成的二维码是没有边框的，看起来不是很好看）
.qrcode{
display: inline-block;
img {
width: 132px;
height: 132px;
background-color: #fff; //设置白色背景色
padding: 6px; // 利用padding的特性，挤出白边
box-sizing: border-box;
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
更新时间: 3/22/2021, 4:43:19 PM