vue-qr生成下载二维码

前端  /  管理员 发布于 7年前   358

安装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设置二维码大小,宽高相等200margin二维码与边框的距离,可以设置白边20colorDark实点的颜色#333colorLight空白区的颜色#999bgSrc欲嵌入的背景图地址
gifBgSrc欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能200backgroundColor背景色#666backgroundDimming叠加在背景图上的颜色, 在解码有难度的时有一定帮助#444logoSrc中央图片或logo的路径
logoMarginLOGO 标识周围的空白边框1logoBackgroundColorLogo 背景色,需要设置 logo margin#888logoCornerRadiusLOGO 标识及其边框的圆角半径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)}