由于最近时间太忙了,只能趁着五一把之前欠下的博客全部补上,今天说一下前端如何生成二维码
之前做支付的时候就有用到的,本来想着因为很简单,就不写博客了,结果最近又遇到了,于是又百度了一下,索性自己写一篇博客,方便以后查找
代码也没啥好解释的,导入一个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的特性,挤出白边
以上就是我对生成二维码的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。