vue生成二维码的插件~避免踩坑mark

vue生成二维码的两个插件

前段时间有个需求需要用到二维码，特意找了一些相关插件，发现了两个还是好用的分享给大家。
简单介绍一下如何避免踩坑。

第一种方法 qrcodejs2

• 第一步：下载插件qrcodejs2

npm install qrcodejs2 --save

• 第二步：给你准备放入二维码的标签一个id属性 ( 例如：id=“qrcode”)

• 通过在methods中写入一个方法用来调用实现二维码的生成， 例如需要二维码弹出的时候调用
• 我这里写的是在组件渲染完毕后直接渲染出来

• 第一个是基础款，第二个是加了colorDark的属性

参数说明：

属性	是否必填
width (必填项)	宽度(Number)
margin(必填)	边距-默认值为20
bgSrc(选填)	背景图片
logoSrc(选填)	中间的图片
gifBgSrc(选填)	动态背景图 (设置此选项会影响性能)
colorDark(选填)	二维码颜色(实点颜色)
colorLight(选填)	二维码背景填充色
callback(选填)	生成的二维码 Data URI，可以在回调中取得

注意！！！ width 和 height必须是数值,如果写成 width:‘150px’ 就会报错❤

第二种方法 vue-qr

这个插件比起第一个多了一些功能，例如背景图片，类似我们微信个人名片的logo头像，更有趣的是可以社做动态gif图片作为背景图

• 第一步：下载插件vue-qr

npm install vue-qr --save

• 第二步：引入组件，挂载到components中，在template里写入组件

• 第三步：在data中默认返回一个二维码的配置项参数

大概就是这样子 我写了三个跳转百度页面的二维码

最后要注意的是，引入图片文件的时候注意使用require引入，直接写图片路径是会报错的

参数说明：

属性	是否必填
text （必填）	可以写路径或者文字，扫描后想要跳转的路径或者显示的文字
size （必填）	二维码尺寸 长宽一致, 包含外边距
margin（必填）	二维码距离外边框的边距 - 默认值为20
bgSrc（选填）	背景图片
logoSrc（选填）	中间的图片
gifBgSrc （选填）	动态背景图 (设置此选项会影响性能)
colorDark（选填）	二维码颜色(实点颜色)
colorLight（选填）	二维码背景填充色
callback（选填）	生成的二维码 Data URI，可以在回调中取得

第一次发帖，做的不够好大家多担待！如有转帖请注明出处，最后欢迎大牛们来指点，谢谢！