vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

「QRコード」の英語名は「QR Code」です。「QR」は「Quick Response」の略で、このQRコードが「超高速読み取り」という特徴を持っていることを反映しています。 「クイックレスポンスコード」とは、「クイックレスポンスコード」を意味します。

npm ダウンロード

npm インストール vue-qr --save

ダウンロード成功:

ステップ

（１）輸入

'vue-qr' から VueQr をインポートします

（２）vue-qrパラメータ

• text QRコード、つまりQRコードをスキャンした後にジャンプするページ
• size QRコードサイズ
• margin QRコード画像の余白、デフォルトは20px
• bgSrc埋め込み背景画像アドレス
• logoSrcはQRコード中央のLOGOアドレスに埋め込まれます
• logoScale中央の画像のサイズ
• dotScale QRコードのドットのサイズ
• colorDark実点の色 (注: colorLight と一緒に設定した場合にのみ有効)
• colorLight空白色​​ (注: colorDark で設定した場合にのみ機能します)
• autoColorがtrueの場合、背景画像のメインカラーがソリッドポイントの色、つまりcolorDarkとして使用されます。デフォルトはtrueです。

例

<テンプレート>
   <div>
      <vue-qr
         :text="画像URL"
         :size="250"
         :logoSrc="ロゴ"
         :logoScale="0.2">
      </vue-qr>
   </div>
</テンプレート>
<スクリプト>
'vue-qr' から VueQr をインポートします
エクスポートデフォルト{
   名前：''、 
   コンポーネント:{
      ヴュークル、
   },
   データ（） {
      戻る {
         画像URL: 'https://baidu.com',
         ロゴ: require('@/assets/tea_128.png'),
      }
   },
   方法:{
   },
}
</スクリプト>

結果：

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。