与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。
方式一:qrcode
1 | npm install --save qrcodejs2 |
1 | import QRCode from 'qrcodejs2' |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
- 样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看)
![](https://i-blog.csdnimg.cn/blog_migrate/0c0ea454cd4aee940fa304f4d9b41d59.png)
1 2 3 4 5 6 7 8 9 10 | .qrcode{ display : inline- block ; img { width : 132px ; height : 132px ; background-color : #fff ; //设置白色背景色 padding : 6px ; // 利用padding的特性,挤出白边 box-sizing: border-box; } } |
就有了下面的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8af223d84210d0fe3b1e7cf8b96aa76b.png)
方式二:vue-qr
1 | npm install vue-qr --save |
1 | import vueQr from 'vue-qr' |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // logoSrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容 <vue-qr :logoSrc= "imageUrl" text= "xxx" :size= "200" ></vue-qr> <script> export default { name: "qecode" , data() { return { imageUrl: require( "../assets/logo.png" ), } }, components: { vueQr }, }, } </script> |