vue生成自定义样式二维码

最新推荐文章于 2025-05-07 14:22:56 发布

Smile_ping

最新推荐文章于 2025-05-07 14:22:56 发布

阅读量2.5k

点赞数 3

分类专栏： vue 文章标签：自定义二维码 vue-qr pc 生成支付二维码

本文链接：https://blog.youkuaiyun.com/Smile_ping/article/details/121377124

版权

vue 专栏收录该内容

50 篇文章

订阅专栏

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

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

文章目录

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

vue-qr

效果图

例：支付生成二维码

在这里插入图片描述

安装

npm install vue-qr -S

使用

根据需求自定义参数配置

<div class="tc"  v-if="isShowPayType == 1">
      <p class="pdt10 pdb10">
        支付<span class="ft24 fce3 bold">￥{{omsOrderInfo.payAmount}}</span>元
      </p>
      <p>
        请在 <span class="ft20 fce3">{{countDownMinute}}:{{countDownSecond}}</span> 内支付
      </p>
	<div class="qr_code_box" v-loading="loading">
      
      	<!-- 二维码 -->
        <vue-qr :correctLevel="3"
                :autoColor="false"
                colorDark="#313a90"
                :logoSrc="logoSrc"
                :text="codeUrl"
                :size="255"
                :margin="10"
                :logoMargin="3">
        </vue-qr>
      
        <div class="qr_mask" @click="refreshCodeTap" v-if="parseInt(countDownSecond) == 0">
          <i class="refresh el-icon-refresh"></i>
          <p>请点击刷新重新获取二维码</p>
        </div>
    </div>
  	<p>微信扫码支付</p>
</div>

<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）