ヒントこのプラグインは 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 の両方におけるスクロールバーの分析と処理
背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...
前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...
XMeter API は、以下のサービスを含む、JMeter に基づくワンストップのオンライン イン...
目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...
私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...
目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....
矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコード...
「これは革命になるだろう」という記事が出たあと。業界の皆様に認知され、もちろん内外からの評価もいただ...
ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...
序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...
目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...
目次1. 例2. 兵士100人を作成する3. 質問4. 改善点5. エレガント? 6. JSの父から...
序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...