vue使用qrcode生成二维码,可以自定义大小


1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo。只支持像素大小的二维码



2,qrcode支持移动端自定义大小二维码


"qrcode": "^1.2.2",
import QRCode from 'qrcode';


<div class="qrcode_box">
<canvas class="qrcode"></canvas>
</div>


_this.urlData为请求过来的url地址

渲染:
var canvas = document.querySelector('canvas')
QRCode.toCanvas(canvas, this.urlData)

css:

生成二维码之后在canvas标签里有style样式(单位为px),!important的层级比style要高,实现自定义大小
.qrcode_box{
width: 4rem!important;
height: 4rem!important;
margin:rem(40) auto 0;
.qrcode{
width: 4rem!important;
height: 4rem!important;
}
}








免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM