VUEプロジェクトは、2次元コードを生成qrcodejs2使用しています

最近、書き込みプロジェクトのニーズに遭遇し、次回、qrcodejs2使用またはそれ以上を見つけるために、インターネット上のアドレスへの背景に基づいて、2次元コードを生成し、次のテストはまた、後で使用するために、次の使用を整理する必要性を達成することができます

 

1.インストールパッケージ

cnpm私qrcodejs2 -S

2.プロジェクト

HTML：

！ - QRコードの爆弾箱- > 
<！ -私は、二次元コードボックスを遊んでいた、わずか2次元コードの要素を与えるために使用する言葉をロードすることができます- > 
<EL-タイプのボタン= "プライマリ"payOrder "@ =クリック" > </ EL-ボタン> 2次元コードを生成する
<EL- ダイアログの
幅 " 30％= " 
：タイトル ="支払い" 
@close =" closeCode " 
：visible.sync =" innerVisible " 
アペンドボディ-へ> 
の<divクラス= "paycode"> 
<！ -コンテナは、2次元コード、REFに必要配置されている- > 
    <DIV ID = "QRコード" REF = "QRコード"> </ DIV> 
</ DIV> 
</ EL-ダイアログ>

JS：

// の導入 
「qrcodejs2」からインポートQRコード

方法：{ 
  // 2次元コードの表示
  （payOrderを）{
     この .innerVisibleが= trueに
    // 通常はここでは、バックグラウンドのジャンプリンクによって返された2次元コードの内容は、死者の書き込みでありますリンク
    この .qrcodeを= 'https://yuchengkai.cn/docs/frontend/#typeof'
     // nextTickデータをレンダリングしていることを確認$を使用し
    、これを。$ nextTick（（）=> {
       この.crateQrcode（）
    }）
  }、
  // 二次元コード生成
  {）（crateQrcodeを
     この .qrが= 新しい新しい QRコード（ 'QRコード'は、{ 
      幅： 150 、
      高さ： 150、//高さ 
      テキスト：この .qrcode // 2次元コードの内容
      // レンダリング：「キャンバス」//（デフォルトキャンバスによって二つの方法テーブルとキャンバス、）レンダリングモードを設定
      // 背景：」＃のf0f 『
      // フォアグラウンド』 FF0＃が' 
    }）
     // はconsole.log（this.qrcode）
  }
   // 、明確な二次元コードが生成された閉じるポップアップボックス
  closeCodeを（）{
     この。refs.qrcode.innerHTML $ =' ' 
  } 
}

の効果を示します：