由于最近时间太忙了,只能趁着五一把之前欠下的博客全部补上,今天说一下前端如何生成二维码
之前做支付的时候就有用到的,本来想着因为很简单,就不写博客了,结果最近又遇到了,于是又百度了一下,索性自己写一篇博客,方便以后查找
代码也没啥好解释的,导入一个qrcodejs2就行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <template>
<div>
<div class="motail">
<div id="qrcode"></div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
data() {
return {}
},
mounted() {
// 生成二维码
document.getElementById("qrcode").innerHTML = "";
let url = this.$route.query.text
console.log(url)
let qrcode = new QRCode('qrcode', {
width: 220,
height: 220,
text: url, // 二维码地址
render: 'canvas',
colorDark : "#000",
colorLight : "#fff",
})
},
}
</script>
<style scoped>
.motail {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
text-align: center;
}
#qrcode {
display: inline-block;
background-color: #fff; /* 设置白色背景色 */
padding: 20px; /* 利用padding的特性，挤出白边 */
margin-top: 200px;
}
</style>
|
生成出来的二维码样式可能不太好看,我们可以利用padding的特性,挤出白边
以上就是我对生成二维码的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
