vue生成自定义样式二维码

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

vue生成自定义样式二维码相关推荐

Java分别使用zxing及qrcode-plugin生成各种样式二维码
二维码二维条形码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动 ...
【微信小程序】接口生成自定义首页二维码
1.背景在原有小程序上开发了一个新的功能,需要整合首页.但是为了不影响原有业务,且能测试新功能.所以需要新生成一个二维码,用户扫描该二维码可以跳转到新功能的页面. 2.方法 2.1生成二维码的接口: ...
vue + 生成下载成二维码
二维码 <div class='box' v-for="(item,index) in this.num" :key="item.key "> ...
vue生成条形码和二维码并打印
文章目录前言一.生成条形码二.生成二维码三.效果图四.打印前言最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码使用 ...
网站导航：如何在线生成自定义的二维码？（要美观不要俗气）
进入我的主页,查看更多.精选的网站导航! 二维码可直接扫描,内容全是playfulhd.com(文本) 一.草料二维码点我直达(https://cli.im) 特点: 支持文本.网址.文件.图片.音 ...
vue 生成条形码、二维码
条形码 1.安装 cnpm install jsbarcode --save 2.引入 import JsBarcode from 'jsbarcode' 3.二维码容器 <svg id=&qu ...
条码软件如何自定义条码二维码的样式
在生活中我们见到最多的条码二维码基本上都是以方形的黑白效果显示,虽然可能不是很美观,但是这确实是标准的显示方式,不过在中琅条码软件中,却可以自定义条码二维码样式,让条码二维码在保证扫描效果的前提下更加 ...
QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式参考链接:https://github.com/bingoogolapple/B ...
Vue3项目生成并下载二维码，关于vue-qr.vue与qrcode.vue插件之间的区别
1.vue-qr.vue与qrcode.vue大致区别 vue-qr.vue:体积较大,大概4M左右,可以给二维码添加中心logo,生成二维码为img标签,可下载 qrcode.vue:体积较小,不能 ...

vue生成自定义样式二维码

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

文章目录

效果图

安装

使用

部分参数说明

vue生成自定义样式二维码相关推荐

最新文章

热门文章