vue 前端生成二維碼

npm下載

npm install vue-qr --save

//匯入vue-qrcode

import VueQr from 'vue-qr';

vuejs註冊vue-qr元件

 components: {
    VueQr,
  }

元件引數說明：

屬性名稱	屬性說明
text	二維碼內容
correctLevel	容錯級別 0-3
size	二維碼寬度和高度,比如120
margin	二維碼內容距離邊距的大小
colorDark	二維碼資料點的顏色，如#3089dc，autoColor為true時無效
colorLight	空白區域的顏色，autoColor為true時無效
bgSrc	二維碼背景圖，通常和dotScale搭配使用
gifBgSrc	gif作為背景圖，設定gifBgSrc後bgSrc無效
backgroundColor	背景顏色
backgroundDimming	.疊加在背景圖上的顏色, 解碼難時有幫助
logoSrc	二維碼中間的logo的url地址
logoScale	計算logo大小的值,太大將導致解碼失敗, 計算公式 logoScale(size-2margin), 預設為 0.2
logoMargin	logo距離周邊的位置，預設為0
logoBackgroundColor	當logoMargin不為0時，空白區域的顏色
logoCornerRadius	logo的圓角大小，預設為0
whiteMargin	如設定為true將會繪製白邊
dotScale	二維碼資料點的縮小比例，預設為0.35，如果背景圖片不清晰可以縮小這個值
autoColor	是否把背景圖片的主色作為資料點的顏色
binarize	若為 true, 影象將被二值化處理,
binarizeThreshold	預設 128. (0 < threshold < 255) 二值化處理的閾值
callback	生成成功的回撥函式，第一個引數為二維碼 data URL, 第二個引數為 props 傳過來的 qid，因為是非同步生成，所以需要用到qid
bindElement	預設true,否需要自動將生成的二維碼繫結到HTML上。

使用：

<vue-qr
            class="vue-qr"
            :text="erweima"
            :logoScale="50"
            :size="300"
          ></vue-qr>