效果?

代碼

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-2*margin),（默認 0.2）
logoMargin	LOGO標識周圍的空白邊框, 默認為0（推薦5px）
logoBackgroundColor	Logo 背景色,需要設置 logo margin（默認白色）

總結

以上是生活随笔為你收集整理的【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。