vue-qr生成二维码插件

vue-qr生成二维码插件

 

 

// 安装vue生成二维码插件

npm install vue-qr --save

// 在组件中引入使用

<script>
import VueQr from 'vue-qr'
export default {

    data () {

        logoSrc: '',

        appSrc: 'http://www.baidu.com'
    },

    components: {

        VueQr 
    }    
}
</script>

 

<vue-qr :logo-src="logoSrc"
     :size="191"
     :margin="0"
     :auto-color="true"
     :dot-scale="1"
     :text="appSrc"
     colorDark="red"
     colorLight="yellow"
/>

 

1.参数配置详解

 

/*
    
    1.text：扫描二维码之后的结果显示的内容

    2.size：二维码的尺寸，包含外边距

    3.margin：二维码图像的外边距, 默认 20px，一定要设置为零，否则会被莫名奇妙的压缩

    4.colorDark：实点的颜色

    5.colorLight: 空白区的颜色

    6.logoSrc: 欲嵌入至二维码中心的 LOGO 地址，头像图片

    7.autoColor: 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark

*/