vue识别二维码,vue qrcode生成二维码

　　本文主要介绍vue——前端生成二维码的例子，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解一下。

　　相比后端生成二维码，前端生成二维码更加灵活。下面介绍两种前端生成二维码的方式。与二维码相比，vue-qr具有在中间添加logo的功能。

方式一：qrcode

　　新公共管理

　　npm安装-保存qrcodejs2

　　进口

　　从“qrcodejs2”导入二维码

　　使用

　　div class= QR code ref= QR codeurl /div

　　脚本

　　方法：{

　　creatQrCode() {

　　var二维码=新二维码(这个。$refs.qrCodeUrl，{

　　Text: xxxx ，//要转换成二维码的内容

　　宽度：100，

　　身高：100，

　　colorDark: #000000 ，

　　彩灯： #ffffff ，

　　正确级别：二维码。正确级别. H

　　})

　　},

　　},

　　已安装(){

　　this . creat QR code()；

　　},

　　/脚本

　　样式(这里还有一个给二维码加边框的小技巧：如下图所示，我们生成的二维码没有边框，看起来不太好看)

　　有以下效果：

方式二：vue-qr

　　新公共管理

　　npm安装vue-qr -保存

　　进口

　　从“vue-qr”导入vueQr

　　使用

　　//logoSrc是logo的url地址(以require的方式)；文字是需要转化成二维码的内容。

　　vue-QR:logos RC= imageUrl text= XXX :size= 200 /vue-QR

　　脚本

　　导出默认值{

　　名称： qecode ，

　　data() {

　　返回{

　　imageUrl:需要(./assets/logo.png )，

　　}

　　},

　　组件：{

　　vueQr

　　},

　　},

　　}

　　/脚本

　　以上是vue——前端生成二维码的例子细节。更多关于Vue前端生成二维码的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。