Vue2、vue3 で QR コードを生成 (vue-qr)

1. バックエンドがリンクを返します。リンクをテキストに直接挿入して、
最初にプラグインをインポートできます。

npm install vue-qr --save   // 也可以用yarn引入项目

yarn add vue-qr  //  我用的这个，用npm报错了

2.登録

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
    
    
  components: {
    
    VueQr}
}

3.使用する

<el-table-column align="left" label="适用类型" show-overflow-tooltip>
   <template #default="{ row }">
      <vueQr :size="120" :text="row.qrcodeImgUrl" />
   </template>
</el-table-column>

3. パラメータ

パラメータ	説明
文章	エンコードする内容. エンコードする内容
正しいレベル	正しいレベル 0 ～ 3 エラー許容レベル 0 ～ 3
サイズ	出力QRコードの幅と高さにはマージンが含まれます。
マージン	QR コードの周囲に追加する余白。デフォルトは 20px。
色ダーク	「真」のブロックの色。colorDark と colorLight の両方が設定されている場合にのみ機能します。(BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 実点的颜色
色ライト	Color of empty space, or “false” blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色
コンポーネント	QR コード内のパーツの外観を制御します。詳細については、ComponentOptions セクションをお読みください。詳細については、ComponentOptions をお読みください。
bgSrc	QR コードに埋め込む背景 URL。
gifBgSrc	QR コードに埋め込む GIF 背景 URL. gifBackground が設定されている場合, backgroundImage は無視されます. このオプションはパフォーマンスに影響します. このオプションを設定すると、パフォーマンスに影響します
背景色	背景色背景色
バックグラウンド減光	背景画像の上に追加するカラーマスク。デコードに問題がある場合に役立ちます。
ロゴSrc	生成したQRコードの中央に埋め込むロゴURL QRコードの中央に埋め込むロゴアドレス
ロゴスケール	ロゴイメージのスケーリングに使用される値。値が大きいと、デコードに失敗する可能性があります。ロゴのサイズは、logoScale(size-2 margin) に等しくなります。デフォルトは 0.2 です。ロゴのサイズの計算に使用される値で、大きすぎるとデコードが発生します。失敗、ロゴサイズの計算式 logoScale (size-2margin)、デフォルト 0.2
ロゴ余白	ロゴ画像の周囲に表示される白い余白. デフォルトは 0. ロゴ画像の周囲に表示される白い余白. デフォルトは 0.
ロゴ背景色	ロゴの背景色、ロゴの余白の設定が必要ロゴの背景色、ロゴの余白の設定が必要
ロゴコーナー半径	ロゴの角の半径。デフォルトは 0 です。ロゴロゴとその境界線のフィレット半径。デフォルトは 0 です。
ホワイトマージン	true に設定すると、背景画像の周りに白い境界線が表示されます。デフォルトは true です。true に設定すると、背景画像の周りに白い境界線が表示されます。
dotScale	データドットのサイズを縮小するために使用される値 (0 < スケール < 1.0) デフォルト 1 データ領域のポイント削減率、デフォルトは 1
自動色	true に設定すると、backgroundImage のドミナントカラーが colorDark として使用されます。デフォルトは true です。
二値化	true に設定すると、画像全体が指定されたしきい値、または指定されていない場合はデフォルトのしきい値で 2 値化されます。デフォルトは false です。
binarizeThreshold	画像全体を 2 値化するためのしきい値. デフォルトは 128. (0 < しきい値 < 255) 2 値化のしきい値
折り返し電話	生成された QR コードのデータ URI はここで利用可能になります. 生成された QR コードのデータ URI はコールバックで取得できます.最初のパラメータは QR コードのデータ URL であり、2 番目のパラメータは props によって渡される qid です (QR コードはコード生成は非同期なので、並べ替え用の id を追加します)
bindElement	true に設定すると、生成された QR は HTML 要素に自動的にバインドされます。デフォルトは true です。生成された QR コードを HTML に自動的にバインドするかどうかを指定します。デフォルトは true です。

Vue2、vue3 で QR コードを生成 (vue-qr)

おすすめ