QR コードを生成するための Vue 入力コンテンツ/リンク

方法1：qrコード（アイコンなし）

npm i qrcodejs2 --save
   
   
    
    

完全なコード

   
   
    
    
< テンプレート>
< divクラス= "フレックスボックス" >
<div> qrコード(アイコンなし) </div>
< div class = "qrコード" ref = "qrCodeUrl" > < / div >
</div> _ _ _
< / テンプレート>

< スクリプト>
'qrcodejs2'から QRCode をインポートします。

デフォルトの エクスポート{
データa() {
{}を返します。
}、
メソッド: {
/ * QRコードを作成* /
creatQrCode() {
新しい QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan' , // QR コードの内容
幅: 150、
身長: 150、
colorDark: '#000'、
colorLight: '#fff'、
正しいレベル: QRCode.CorrectLevel.H
});
}
}、
マウントされた() {
this.creatQrCode(); // QRコードを作成する
}
};
< / スクリプト>

< スタイルスコープ>
.flex-box {
ディスプレイ : フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
フレックス方向:列;
}
。QRコード {
パディング: 10ピクセル;
マージントップ: 20ピクセル;
背景色: #fff;
境界線: 1ピクセルの赤一色。
}
< / スタイル>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

方法 2: vue- qr (アイコンアイコンを使用)

公式サイトアドレス：vue-qr-npm

npm install vue-qr --save
   
   
    
    

インポートインポート方法

import vueQr from 'vue-qr'; // vue2.0
   
   
    
    

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
   
   
    
    

完全なコード

   
   
    
    
< テンプレート>
< divクラス= "フレックスボックス" >
< div > vue-qr (アイコン付き) < / div >
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
</div> _ _ _
< / テンプレート>

< スクリプト>
'vue-qr'から vueQr をインポートします。// 2.0を表示_
// ' vue-qr/src/packages/vue-qr.vue'からvueQr をインポートします。// 3.0を表示(クイックサポート)

デフォルトの エクスポート{
コンポーネント: { vueQr }、
データa() {
戻り値 {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan' , // QR コードの内容
imageUrl: require( '../assets/default.jpg' ) / /アイコンパス
};
}、
メソッド: {}
};
< / スクリプト>

< スタイルスコープ>
.flex-box {
ディスプレイ : フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
フレックス方向:列;
}
。QRコード {
マージントップ: 20ピクセル;
背景色: #fff;
境界線: 1ピクセルの赤一色。
}
< / スタイル>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

関連する構成プロパティ

属性名	意味
文章	エンコードされたコンテンツ
正しいレベル	許容レベル (0 ～ 3)
サイズ	寸法、同じ長さと幅（マージンを含む）
マージン	QR コード画像の外側の余白、デフォルトは 20px
色濃い	ソリッドカラー
色光	空白の色
bgSrc	埋め込む背景画像のアドレス
gifBgSrc	埋め込む背景画像のgifアドレス、通常の背景画像は設定後は無効となります。このオプションを設定するとパフォーマンスに影響します
背景色	背景色
背景調光	背景画像に色を重ねて表示すると、解読が困難な場合に役立ちます。
ロゴソース	QRコード中央に埋め込まれたロゴアドレス
ロゴスケール	ロゴ サイズの計算に使用される値。大きすぎるとデコードが失敗します。ロゴ サイズの計算式は logoScale * (size - 2 * margin)、デフォルトは 0.2
ロゴ余白	ロゴの周りの空白の境界線、デフォルトは 0 です
ロゴ背景色	ロゴの背景色、ロゴの余白を設定する必要があります
ロゴコーナー半径	ロゴとその境界線のフィレット半径。デフォルトは 0 です。
ホワイトマージン	true に設定すると、背景画像の外側に白い境界線が描画されます。
ドットスケール	データ領域のポイント削減率、デフォルトは 0.35
自動カラー	true の場合、画像は 2 値化され、しきい値が指定されていない場合はデフォルト値が使用されます。
二値化しきい値	(0 < 閾値 < 255) 2値化の閾値
折り返し電話	生成された QR コード データの URL はコールバックで取得できます。最初のパラメーターは QR コード データの URL、2 番目のパラメーターは props から渡された qid です (QR コードの生成は非同期であるため、ソート用の ID を追加します)。
バインド要素	生成された QR コードを HTML に自動的にバインドするかどうかを指定します。デフォルトは true です。

方法1：qrコード（アイコンなし）

npm i qrcodejs2 --save
   
   
  
  

完全なコード

   
   
  
  
< テンプレート>
< divクラス= "フレックスボックス" >
<div> qrコード(アイコンなし) </div>
< div class = "qrコード" ref = "qrCodeUrl" > < / div >
</div> _ _ _
< / テンプレート>

< スクリプト>
'qrcodejs2'から QRCode をインポートします。

デフォルトの エクスポート{
データa() {
{}を返します。
}、
メソッド: {
/ * QRコードを作成* /
creatQrCode() {
新しい QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan' , // QR コードの内容
幅: 150、
身長: 150、
colorDark: '#000'、
colorLight: '#fff'、
正しいレベル: QRCode.CorrectLevel.H
});
}
}、
マウントされた() {
this.creatQrCode(); // QRコードを作成する
}
};
< / スクリプト>

< スタイルスコープ>
.flex-box {
ディスプレイ : フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
フレックス方向:列;
}
。QRコード {
パディング: 10ピクセル;
マージントップ: 20ピクセル;
背景色: #fff;
境界線: 1ピクセルの赤一色。
}
< / スタイル>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

方法 2: vue- qr (アイコンアイコンを使用)

公式サイトアドレス：vue-qr-npm

npm install vue-qr --save
   
   
  
  

インポートインポート方法

import vueQr from 'vue-qr'; // vue2.0
   
   
  
  

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
   
   
  
  

完全なコード

   
   
  
  
< テンプレート>
< divクラス= "フレックスボックス" >
< div > vue-qr (アイコン付き) < / div >
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
</div> _ _ _
< / テンプレート>

< スクリプト>
'vue-qr'から vueQr をインポートします。// 2.0を表示_
// ' vue-qr/src/packages/vue-qr.vue'からvueQr をインポートします。// 3.0を表示(クイックサポート)

デフォルトの エクスポート{
コンポーネント: { vueQr }、
データa() {
戻り値 {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan' , // QR コードの内容
imageUrl: require( '../assets/default.jpg' ) / /アイコンパス
};
}、
メソッド: {}
};
< / スクリプト>

< スタイルスコープ>
.flex-box {
ディスプレイ : フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
フレックス方向:列;
}
。QRコード {
マージントップ: 20ピクセル;
背景色: #fff;
境界線: 1ピクセルの赤一色。
}
< / スタイル>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

関連する構成プロパティ

属性名	意味
文章	エンコードされたコンテンツ
正しいレベル	許容レベル (0 ～ 3)
サイズ	寸法、同じ長さと幅（マージンを含む）
マージン	QR コード画像の外側の余白、デフォルトは 20px
色濃い	ソリッドカラー
色光	空白の色
bgSrc	埋め込む背景画像のアドレス
gifBgSrc	埋め込む背景画像のgifアドレス、通常の背景画像は設定後は無効となります。このオプションを設定するとパフォーマンスに影響します
背景色	背景色
背景調光	背景画像に色を重ねて表示すると、解読が困難な場合に役立ちます。
ロゴソース	QRコード中央に埋め込まれたロゴアドレス
ロゴスケール	ロゴ サイズの計算に使用される値。大きすぎるとデコードが失敗します。ロゴ サイズの計算式は logoScale * (size - 2 * margin)、デフォルトは 0.2
ロゴ余白	ロゴの周りの空白の境界線、デフォルトは 0 です
ロゴ背景色	ロゴの背景色、ロゴの余白を設定する必要があります
ロゴコーナー半径	ロゴとその境界線のフィレット半径。デフォルトは 0 です。
ホワイトマージン	true に設定すると、背景画像の外側に白い境界線が描画されます。
ドットスケール	データ領域のポイント削減率、デフォルトは 0.35
自動カラー	true の場合、画像は 2 値化され、しきい値が指定されていない場合はデフォルト値が使用されます。
二値化しきい値	(0 < 閾値 < 255) 2値化の閾値
折り返し電話	生成された QR コード データの URL はコールバックで取得できます。最初のパラメーターは QR コード データの URL、2 番目のパラメーターは props から渡された qid です (QR コードの生成は非同期であるため、ソート用の ID を追加します)。
バインド要素	生成された QR コードを HTML に自動的にバインドするかどうかを指定します。デフォルトは true です。