ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機能しません。vue3 はエラーが発生しやすいため、vue2 を使用することをお勧めします。 ! ! ! ! 説明するvueでコードスキャン機能を実現する 参考ドキュメント: vue-qrcode-reader 公式サイトへ移動 –> 公式ドキュメント エフェクト表示実装手順:ステップ1(プラグインをインストールする)
ステップ 2 (コンポーネントの作成)複数ページで使用される可能性があるため、コンポーネント化します(1)srcの下のcomponentsにqrcode.vueを作成します // qrcode.vue <テンプレート> <div> <!-- <p class="error">{{ エラー }}</p> --> <!--エラーメッセージ--> <!-- <p class="decode-result"> スキャン結果: {{ 結果 }} </p> --> <!--スキャン結果--> <!-- <p @click="openCamera">カメラを開く</p> <div v-show="表示" class="カメラメッセージ"> <p @click="closeCamera">カメラを閉じる</p> <p @click="openFlash">懐中電灯を開く</p> <p @click="switchCamera">カメラ反転</p> </div> --> <qrコードストリーム v-show="qrコード" :camera="カメラ" :torch="トーチアクティブ" @decode="デコード中" @init="onInit" > <div> <div class="qr-scanner"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> <div class="txt"> QR コード/バーコードをボックスに入れると、<div class="myQrcode">My QR code</div> が自動的にスキャンされます。 </div> </div> </div> </qrcode-stream> </div> </テンプレート> <スクリプト> // プラグインをダウンロード // cnpm install --save vue-qrcode-reader // インポート import { QrcodeStream } from 'vue-qrcode-reader'; エクスポートデフォルト{ // コンポーネントを登録: { QrcodeStream }, データ() { 戻る { 結果: '', // スキャン結果情報 error: '', // エラーメッセージ // 表示: false, // QRコード: false, QRコード: 真、 torchActive: false、 カメラ: '前面'、 }; }, メソッド: { onDecode(結果) { console.log(結果); this.result = 結果; }, 非同期 onInit(promise) { const { 機能 } = promise を待機します。 TORCH_IS_SUPPORTED はサポートされています。 試す { 約束を待つ; } キャッチ(エラー){ if (error.name === 'NotAllowedError') { this.error = 'エラー: カメラへのアクセスを許可する必要があります'; } それ以外の場合 (error.name === 'NotFoundError') { this.error = 'エラー: このデバイスにはカメラがありません'; } それ以外の場合 (error.name === 'NotSupportedError') { this.error = 'エラー: セキュリティ コンテキストが必要です (HTTPS、localhost)'; } それ以外の場合 (error.name === 'NotReadableError') { this.error = 'エラー: カメラが使用されています'; } そうでない場合 (error.name === 'OverconstrainedError') { this.error = 'エラー: カメラのインストールが不適切です'; } そうでない場合 (error.name === 'StreamApiNotSupportedError') { this.error = 'エラー: このブラウザはストリーム API をサポートしていません'; } } }, // カメラを開く // openCamera() { // this.camera = 'リア' // this.qrcode = true // this.show = true // }, // カメラを閉じる // closeCamera() { // this.camera = 'オフ' // this.qrcode = false // this.show = false // }, // 懐中電灯をオンにする // openFlash() { // スイッチ (this.torchActive) { // 真のケース: // this.torchActive = false // 壊す // 偽の場合: // this.torchActive = true // 壊す // } // }, // カメラ反転 // switchCamera() { // // console.log(this.camera); // スイッチ (this.camera) { // ケース 'front': // this.camera = 'リア' // コンソールログ(このカメラ) // 壊す // ケース '背面': // this.camera = 'front' // コンソールログ(このカメラ) // 壊す // } // } }, }; </スクリプト> <スタイルスコープ> 。エラー { フォントの太さ: 太字; 色: 赤; } .カメラメッセージ{ 幅: 100%; 高さ: 60px; } .qrスキャナー{ 背景画像: 線形グラデーション( 0度、 透明 24%、 RGBA(32, 255, 77, 0.1) 25%, RGBA(32, 255, 77, 0.1) 26%, 透明 27%、 透明度74%、 RGBA(32, 255, 77, 0.1) 75%, RGBA(32, 255, 77, 0.1) 76%, 透明度77%、 透明 )、 線形グラデーション( 90度、 透明 24%、 RGBA(32, 255, 77, 0.1) 25%, RGBA(32, 255, 77, 0.1) 26%, 透明 27%、 透明度74%、 RGBA(32, 255, 77, 0.1) 75%, RGBA(32, 255, 77, 0.1) 76%, 透明度77%、 透明 ); 背景サイズ: 3rem 3rem; 背景位置: -1rem -1rem; 幅: 100%; /* 高さ: 100%; */ 高さ:100vh; /* 高さ: 288px; */ 位置: 相対的; 背景色: #1110; /* 背景色: #111; */ } /* .qrcode-stream-wrapper { ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 上マージン: 82px; クリア: 両方; } */ /* .qrcode-stream-wrapper >>> .qrcode-stream-camera { 幅: 213px; 高さ: 210px; クリア: 両方; 上マージン: 39px; } */ .qr-スキャナー .box { 幅: 213px; 高さ: 213px; 位置: 絶対; 左: 50%; 上位: 50%; 変換: translate(-50%, -50%); オーバーフロー: 非表示; 境界線: 0.1rem実線rgba(0, 255, 51, 0.2); /* 背景: url('http://resource.beige.world/imgs/gongconghao.png') 繰り返しなし 中央 中央; */ } .qr-スキャナー .txt { 幅: 100%; 高さ: 35px; 行の高さ: 35px; フォントサイズ: 14px; テキスト配置: 中央; /* 色: #f9f9f9; */ マージン: 0 自動; 位置: 絶対; 上位:70% 左: 0; } .qr-scanner .myQrcode { テキスト配置: 中央; 色: #00ae10; } .qr-スキャナー .line { 高さ: calc(100% - 2px); 幅: 100%; 背景: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); 下境界線: 3px 実線 #00ff33; 変換: translateY(-100%); アニメーション: レーダービーム 2 秒無限交互; アニメーションタイミング関数: 立方ベジェ(0.53, 0, 0.43, 0.99); アニメーション遅延: 1.4秒; } .qr-scanner .box:after、 .qr-scanner .box:before, .qr-scanner .angle:after, .qr-scanner .angle:before { コンテンツ: ''; 表示: ブロック; 位置: 絶対; 幅: 3vw; 高さ: 3vw; 境界線: 0.2rem 透明実線; } .qr-scanner .box:after、 .qr-スキャナー .box:before { 上: 0; 上の境界線の色: #00ff33; } .qr-scanner .angle:after, .qr-scanner .angle:before { 下部: 0; 境界線下部の色: #00ff33; } .qr-scanner .box:before, .qr-scanner .angle:before { 左: 0; 左境界線の色: #00ff33; } .qr-scanner .box:after、 .qr-scanner .angle:after { 右: 0; 右境界線の色: #00ff33; } @keyframes レーダービーム { 0% { 変換: translateY(-100%); } 100% { 変換: translateY(0); } } </スタイル> (3)スキャンコードが必要なページで紹介 // '@/components/qrcode.vue' から qrcode をインポートします。 (4)コンポーネントの登録 // コンポーネント: 'vue-qrcode': qrコード、 }, (5)コンポーネントの使用 // QR コードを表示する場所をレンダリングします <vue-qrcode /> //上記が機能しない場合は、次の <vue-qrcode></vue-qrcode> を使用できます。 Vue の QR コードスキャン機能に関するこの記事はこれで終わりです。Vue の QR コードスキャンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理
/****************** * カーネルデバッグ技術 ****************...
問題の説明MySQL 起動エラー メッセージは次のとおりです。 mysqld を起動します (sys...
取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...
この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...
コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...
手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....
目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...
inline-flex は inline-block と同じです。内部要素用の display:fl...
最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...
1. 自動フロー属性、要素コンテンツの長さと幅が要素自体の長さと幅を超える場合、スクロールバーが表示...
この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体...
この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...
元のコード: center.html : <!DOCTYPE html> <htm...