vue-qr生成下載二維碼

安裝vue-qr

npm install vue-qr --save

生成二維碼實列

<vue-qr  ref="Qrcode" 
    :text="qrCodeConfig.text" 
    :download="downloadFilename" 
    :margin="10" 
    :size="200" 
    :dotScale="qrCodeConfig.dotScale" 
    :colorDark="qrCodeConfig.colorDark"
>
</vue-qr>
data(){
    return {
        qrCodeConfig: {
            text: 'http://121.40.121.142:8080/register?parent_id='+id,
            dotScale: 0.9,
            colorDark: '#663300'
        },
        downloadFilename:''
    }
}

屬性介紹

 

屬性	描述	舉列
text	要生成二維碼的內容
size	設置二維碼大小,寬高相等	200
margin	二維碼與邊框的距離,可以設置白邊	20
colorDark	實點的顏色	#333
colorLight	空白區的顏色	#999
bgSrc	欲嵌入的背景圖地址
gifBgSrc	欲嵌入的背景圖 gif 地址,設置后普通的背景圖將失效。設置此選項會影響性能	200
backgroundColor	背景色	#666
backgroundDimming	疊加在背景圖上的顏色, 在解碼有難度的時有一定幫助	#444
logoSrc	中央圖片或logo的路徑
logoMargin	LOGO 標識周圍的空白邊框	1
logoBackgroundColor	Logo 背景色,需要設置 logo margin	#888
logoCornerRadius	LOGO 標識及其邊框的圓角半徑	3

 

下載二維碼

downloadImg () {
      const iconUrl = this.$refs.Qrcode.$el.src
      let a = document.createElement('a')
      let event = new MouseEvent('click')
      a.download = '二維碼'
      a.href = iconUrl
      a.dispatchEvent(event)
}

參考鏈接  http://www.fly63.com/article/detial/5606