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)
}- 上一篇 »python 生成二维码
- 下一篇 »使用原生javaScript绘制带图片的二维码---js
