Vue——前端生成二维码的示例

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

方式一：qrcode

• npm

npm install --save qrcodejs2

• import

import QRCode from 'qrcodejs2'

• 使用

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

就有了下面的效果：

方式二：vue-qr

• npm

npm install vue-qr --save

• import

import vueQr from 'vue-qr'

• 使用

// logoSrc为logo的url地址(使用require的方式)；text为需要转换为二维码的内容

 

以上就是Vue——前端生成二维码的示例的详细内容，更多关于vue 前端生成二维码的资料请关注脚本之家其它相关文章！