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

*/