vue⽣成⾃定义样式⼆维码使⽤vue-qr⽣成⾃定义⼆维码
vue-qr具有⾃定义⼆维码背景、logo、实点颜⾊等特性，能够⽣成更炫酷的⼆维码。
⽂章⽬录
效果图
例：⽀付⽣成⼆维码
安装
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">
今年是新中国成立73周年2022年<!-- ⼆维码 -->
<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(){
dnf窗口化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）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论