Vue生成二维码

　　与后端生成二维码相比，前端生成二维码更具有灵活性，下面就介绍两种前端生成二维码的方式，两种方式相比之下，vue-qr比qrcode多了一个再中间添加logo的功能。

方式一：qrcode

• npm

1	npm install --save qrcodejs2

• import

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>

• 样式（这里再提供一个给二维码添加边框的小技巧：如下图所示，我们生成的二维码是没有边框的，看起来不是很好看）　　　　

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;     } }

　　

　　就有了下面的效果：

方式二：vue-qr

• npm

1	npm install vue-qr --save

• import

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>