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