vue生成二维码的两个插件

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

第一种方法 qrcodejs2

• 第一步：下载插件qrcodejs2

npm install qrcodejs2 --save

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

<template>
    <div>
        <div id="qrcode"></div> //必须是id 和实例化的第一参数对应
    </div>
</template>

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

<script>
	import QRCode from 'qrcodejs2';
	export default {
	    mounted () {
	        this.qrcode(); //调用二维码生成的方法
	    },
	    methods: {
	        qrcode () {
	            // 和div的id相同 必须是id  class类名会报错
	            // 第二参数是他的配置项
	            let qrCode = new QRCode('qrcode', {
	                width: 150,
	                height: 150,
	                text: 'http://www.baidu.com',
	                colorDark: '#ccc',
	                colorLight: 'yellow'
	            })
	        }
	    }
	}
</script>

• 第一个是基础款，第二个是加了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里写入组件

<template>
    <div>
       <VueQr :margin='20' :size='200' :text='config.text'></VueQr>
    </div>
</template>

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

<script>
import VueQr from 'vue-qr';
export default {
    data () {
        return {
            config: {
                text:'123',		//必须写text属性
                bgSrc: require('../img/chicken.jpg'),
                logoSrc: require('../img/dao.jpg'),
                gifBgSrc: require('../img/dog.gif')
            }
        }
    },
    components: {
        VueQr
    }
}
</script>

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

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

参数说明：

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

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