效果?

代碼

npm install vue-qr --save

個別網(wǎng)絡(luò)用 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: "舒工請你付款來了", //二維碼內(nèi)容（掃碼識別后需要訪問的網(wǎng)址）amount: 168//金額};}};
</script>

屬性說明：

text	編碼的內(nèi)容（支持文字、網(wǎng)址）
correctLevel	容錯級別 0-3（容錯級別越高，代表遮住二維碼部分越多，依然可以識別）
size	尺寸, 長寬一致, 包含外邊距（推薦20px）
margin	二維碼圖像的外邊距, 默認(rèn)20px
colorDark	實(shí)點(diǎn)的顏色（默認(rèn)黑色）
colorLight	空白區(qū)的顏色（默認(rèn)白色）
bgSrc	嵌入的背景圖地址（支持png、jpg）
gifBgSrc	欲嵌入的背景圖 gif 地址,設(shè)置后普通的背景圖將失效。設(shè)置此選項(xiàng)會影響性能
backgroundColor	背景色（默認(rèn)白色）
backgroundDimming	疊加在背景圖上的顏色, 在解碼有難度的時有一定幫助（默認(rèn)白色）
logoSrc	嵌入至二維碼中心的 LOGO 地址（支持png、jpg）
logoScale	用于計算 LOGO 大小的值, 過大將導(dǎo)致解碼失敗, LOGO 尺寸計算公式?logoScale*(size-2*margin),（默認(rèn) 0.2）
logoMargin	LOGO標(biāo)識周圍的空白邊框, 默認(rèn)為0（推薦5px）
logoBackgroundColor	Logo 背景色,需要設(shè)置 logo margin（默認(rèn)白色）

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。