【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性

效果

代码

npm install vue-qr --save

个别网络用 cnpm install vue-qr --save 安装

<template><div class="sg-qrcode"><vue-qr :text="qrcodeText":correctLevel="3":size="250":margin="10"colorDark="#2ba245"colorLight="white"backgroundColor="white"backgroundDimming="white":logoSrc="require('@/assets/login/qrcode-logo.jpg')":logoScale=".2":logoMargin="5"logoBackgroundColor="white"></vue-qr><h2>请用微信扫码支付</h2><h2>￥<b>{{amount}}</b>元</h2></div>
</template><script>import vueQr from "vue-qr"; //引入二维码生成组件export default {components: {vueQr //二维码生成组件},data() {return {qrcodeText: "舒工请你付款来了", //二维码内容（扫码识别后需要访问的网址）amount: 168//金额};}};
</script>

属性说明：

text	编码的内容（支持文字、网址）
correctLevel	容错级别 0-3（容错级别越高，代表遮住二维码部分越多，依然可以识别）
size	尺寸, 长宽一致, 包含外边距（推荐20px）
margin	二维码图像的外边距, 默认20px
colorDark	实点的颜色（默认黑色）
colorLight	空白区的颜色（默认白色）
bgSrc	嵌入的背景图地址（支持png、jpg）
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色（默认白色）
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助（默认白色）
logoSrc	嵌入至二维码中心的 LOGO 地址（支持png、jpg）
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 `logoScale(size-2margin)`,（默认 0.2）
logoMargin	LOGO标识周围的空白边框, 默认为0（推荐5px）
logoBackgroundColor	Logo 背景色,需要设置 logo margin（默认白色）

【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性相关推荐

Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
广告横幅logo图标在线制作网站源码引流必备
介绍: PHP广告横幅logo图标在线制作网站源码记得点击网站目录把防跨站攻击先关闭,这样就可以正常访问了,这款是有后台的但是不带数据库的,账号密码和内容信息可以在jason.php文件里进行修改替 ...
【相对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性
效果代码 npm install vue-qr --save 个别网络用 cnpm install vue-qr --save 安装 <template><div class=&q ...
二维火收银显示服务器超时怎么办,配件连接及后台设置二维火服务中心.pdf
配件连接及后台设置二维火服务中心配件连接及后台设置二维火服务中心温馨提示:可将该页面撕下贴于收银处,供收银员随时查看常见问题. 收银员常见问题 1.收银数据更新 ①登录二维火收银→左下角数据更新 ...
java response 状态码_response（向客户端写入数据、对相应进行设置（状态码、响应头））...
一.向客户端写入数据 1.写入文字 protected voiddoGet(HttpServletRequest request, HttpServletResponse response) thro ...
PHP在线横幅广告logo图标制作网站源码
简介: PHP广告横幅logo图标在线制作网站源码上传服务器站点目录即可,如果使用宝塔架设点击访问的时候提示找不到文件路径的时候, 记得点击网站目录把防跨站攻击先关闭,这样就可以正常访问了,这款是有 ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...

【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性

【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性相关推荐

最新文章

热门文章