vue生成自定义样式二维码

使用vue-qr生成自定义二维码

vue-qr具有自定义二维码背景、logo、实点颜色等特性，能够生成更炫酷的二维码。

vue-qr

效果图

例：支付生成二维码

安装

npm install vue-qr -S

使用

• 根据需求自定义参数配置

      

        支付￥{{omsOrderInfo.payAmount}}元
      
      

        请在 {{countDownMinute}}:{{countDownSecond}} 内支付
      
	

      
      	
        
        
      
        

          
          
请点击刷新重新获取二维码
        
    
  	
微信扫码支付

<script>
    import vueQr from 'vue-qr'

    export default {
      	data() {
            return {
                isShowPayPopup: false,
                bgSrc: '',
                logoSrc: require('@/assets/images/logo.png'),
                codeUrl: 'weixin://wxpay/bizpayurl?pr=TEoxYn0zz',
            }
        },
       	components: {
            vueQr
        },
    }
</script>

部分参数说明

具体参数请查看

参数	说明
text	二维码内容
size	尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
bgSrc	欲嵌入的背景图地址
backgroundColor	背景色
logoSrc	嵌入至二维码中心的 LOGO 地址
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2
logoMargin	标识周围的空白边框, 默认为0
logoBackgroundColor	背景色,需要设置 logo margin
logoCornerRadius	标识及其边框的圆角半径, 默认为0
gifBgSrc	欲嵌入的背景图 gif 地址, 设置后普通的背景图将失效。设置此选项会影响性能
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助
dotScale	数据区域点缩小比例,默认为0.35
whiteMargin	若设为 true, 背景图外将绘制白色边框（默认是true）
bindElement	指定是否需要自动将生成的二维码绑定到HTML上（默认是true）