vue-qr生成下载二维码

安装vue-qr

npm install vue-qr --save

生成二维码实列

---

data(){
    return {
        qrCodeConfig: {
            text: 'http://121.40.121.142:8080/register?parent_id='+id,
            dotScale: 0.9,
            colorDark: '#663300'
        },
        downloadFilename:''
    }
}

属性介绍

---

属性	描述	举列
text	要生成二维码的内容	https://segmentfault.com/write
size	设置二维码大小,宽高相等	200
margin	二维码与边框的距离,可以设置白边	20
colorDark	实点的颜色	#333
colorLight	空白区的颜色	#999
bgSrc	欲嵌入的背景图地址	https://www.vipbic.com/**.jpg
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能	200
backgroundColor	背景色	#666
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助	#444
logoSrc	中央图片或logo的路径	https://www.vipbic.com/**.jpg
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)
}

最终效果

---

最终代码

---